我正致力于在我的ext.js（和sencha touch）应用程序中创建用户个人资料视图。我已经设置了路由，并且在data.js中有我的数据模型。我还创建了一个表单来显示数据。但是，我在前端渲染用户数据时遇到了问题。
index.js代码：
// User Profile
var userProfileToolbar = {
xtype: 'toolbar',
id: 'userProfileToolbar',
title: 'UserProfile',
style: settings_sz2,
ui: 'light',
docked: 'top',
items: gen_top_buttons
};
var userprofile_tabbar = {
xtype: 'tabbar',
id: 'userprofile_tabbar',
style: dark_tabbar_sz,
ui: 'light',
docked: 'top',
items: all_discover_buttons
};
var profileForm = {
items: [
{
xtype: 'textfield',
name : 'email',
label: 'Email',
labelWidth: '35%'
},
{
xtype: 'textfield',
name : 'disp_name',
label: 'Display Name',
labelWidth: '35%',
listeners: {
check: {
fn: function() {
account.get('disp_name');
account.set("disp_name", disp_name);
account.setDirty();
store.sync();
}
}
}
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website',
labelWidth: '35%'
},
{
xtype: 'textfield',
name : 'location',
label: 'Location',
labelWidth: '35%'
},
{
xtype: 'selectfield',
name : 'defaultCollection',
label: 'Default Collection',
labelWidth: '35%',
labelWrap:true,
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
},
{
xtype: 'selectfield',
name : 'relationshipStatus',
label: 'Relationship Status',
labelWidth: '35%',
labelWrap:true,
options: [
{text: 'Single', value: 'single'},
{text: 'In a Relationship', value: 'inARelationship'},
{text: 'Married', value: 'married'}
]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Gender',
style: settings_sz,
hidden: false,
margin: '0',
id: 'male_female_gender',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'male_female_gender',
label: 'Male',
value: 0,
}, {
name: 'male_female_gender',
label: 'Female',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Sexual Orientation',
style: settings_sz,
hidden: false,
margin: '0',
id: 'sexual_orientation',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'sexual_orientation',
label: 'Straight',
value: 0,
}, {
name: 'sexual_orientation',
label: 'Gay',
value: 1,
},{
name: 'sexual_orientation',
label: 'Bi',
value: 2,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Email Subscription',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_email_subscription',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_email_subscription',
label: 'Enabled',
value: 0,
}, {
name: 'enable_disable_email_subscription',
label: 'Disabled',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Default Access',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_default_access',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_default_access',
label: 'Public',
value: 0,
}, {
name: 'enable_disable_default_access',
label: 'Private',
value: 1,
}, {
name: 'enable_disable_default_access',
label: 'Adult',
value: 2,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Safe Browsing',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_safe_browsing',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_safe_browsing',
label: 'On',
value: 0,
}, {
name: 'enable_disable_safe_browsing',
label: 'Off',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Visibility',
style: settings_sz,
hidden: false,
margin: '0',
id: 'everyone_loggedin_visibility',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'everyone_loggedin_visibility',
label: 'Everyone',
value: 0,
}, {
name: 'everyone_loggedin_visibility',
label: 'Logged In',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Email Notification',
style: settings_sz,
hidden: false,
margin: '0',
id: 'new_share_emailnotification',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'new_share_emailnotification',
label: 'New Connection',
value: 0,
}, {
name: 'new_share_emailnotification',
label: 'Video Sharing',
value: 1,
}]
},
{
xtype: 'button',
ui: 'plain',
style: 'background-color: green; width: 90%; color: white; margin-left: 5%; margin-bottom: 15px; margin-top: 15px',
id: 'save',
text: 'Save Changes'
},
{
xtype: 'button',
style: 'width: 90%; margin-left: 5%; margin-bottom: 15px;',
id: 'cancel',
text: 'Cancel',
},
],
listeners: {
itemtap: {
fn: function(view, index, target, record, event) {
var user_id = record.get('user_id');
setTimeout(function() {
Ext.getCmp('userprofile_recommendations_var').deselectAll();
}, 500);
}
}
}
};
Ext.define('myVidster.view.UserProfile', {
extend: 'Ext.Panel',
id: 'UserProfile',
fields: [
'email',
{name: 'disp_name', type: 'string', value: 'account.get("disp_name")'},
],
alias: 'widget.UserProfile',
config: {
scrollable: {
direction: 'vertical',
directionLock: true,
},
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [userProfileToolbar, profileForm,]
},
listeners: {
load: function(users) {
var profileForm = Ext.getCmp('UserProfile');
profileForm.loadRecord(this.data.first());
}
}
});
Data.js：
//用户个人资料数据
Ext.define('userprofile_model', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'user_id',
type: 'string'
}, {
name: 'disp_name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'phone_number',
type: 'string'
}, {
name: 'pw',
type: 'string'
}, {
name: 'family_filter',
type: 'string'
}, {
name: 'v_orientation_chk',
type: 'string'
}, {
name: 'anc1',
type: 'int'
}, {
name: 'current_video',
type: 'int'
}, {
name: 'current_video_type',
type: 'string'
}, {
name: 'video_history',
type: 'auto'
}, {
name: 'video_history_chk',
type: 'string'
}, {
name: 'HTML5_only',
type: 'string'
}, {
name: 'filter_by',
type: 'string'
}, {
name: 'unlock',
type: 'int'
}],
proxy: {
type: 'localstorage',
id: 'UserProfile'
}
}
});
var userprofile_obj = Ext.create("Ext.data.Store", {
model: 'userprofile_model',
pageSize: 9,
proxy: {
type: 'jsonp',
url: "http://api.example.com/mobile_json2.php",
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total'
},
extraParams: {
last_id: '0'
},
},
autoLoad: false,
listeners: {
load: function(store) {
var tmp = store.first();
var tmp2 = store.getData();
Ext.getCmp('userprofile_recommendations_var').setItemTpl(discover_recommendations_listTpl)
}
}
});
当我尝试使用数据预填充字段时出现问题。
例如：
{
xtype: 'textfield',
name : 'disp_name',
label: 'Display Name',
labelWidth: '35%',
value: account.get('disp_name'),
listeners: {
check: {
fn: function() {
account.get('disp_name');
account.set("disp_name", disp_name);
account.setDirty();
store.sync();
}
}
}
},
不返回显示名称。