在extjs 4.0中将json存储加载到表单时出现问题
我有以下代码。我正在尝试通过json创建存储。我可以看到firebug调用json,但这些数据没有加载表单。这将使用模型的本地实例。因此,我相信包含“formJobSummary”的小组正在工作。问题出在商店的某个地方在extjs 4.0中将json存储加载到表单时出现问题,extjs,Extjs,我有以下代码。我正在尝试通过json创建存储。我可以看到firebug调用json,但这些数据没有加载表单。这将使用模型的本地实例。因此,我相信包含“formJobSummary”的小组正在工作。问题出在商店的某个地方 Ext.define('user', { extend: 'Ext.data.Model' fields: ['quotedPrice'] }); var store = Ext.create('Ext.data.Store', { model: 'us
Ext.define('user', {
extend: 'Ext.data.Model'
fields: ['quotedPrice']
});
var store = Ext.create('Ext.data.Store', {
model: 'user',
proxy: {
type: 'ajax',
url: '/data/users.js',
reader: {
type: 'json',
root: 'user'
}
},
autoLoad: true
});
Ext.define('MyApp.view.MyPanel', {
extend: 'MyApp.view.ui.MyPanel',
initComponent: function () {
var me = this;
me.callParent(arguments);
var form = Ext.getCmp('formJobSummary');
form.loadRecord(store);
}
});
Json'/data/users.js'
{
"success":"true",
"user": [{
"quotedPrice":"12345"
}]
}
为了完整起见,这里是view.ui
Ext.define('MyApp.view.ui.MyPanel', {
extend: 'Ext.panel.Panel',
height: 600,
width: 950,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'JobPanel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
flex: 1,
items: [
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'Job Summary',
items: [
{
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
},
bodyPadding: 10,
title: '',
url: '/submit.html',
flex: 1,
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Submit'
},
{
xtype: 'button',
text: 'Cancel'
}
]
}
],
items: [
{
xtype: 'panel',
flex: 1,
items: [
{
xtype: 'radiogroup',
width: 400,
fieldLabel: 'Job Type',
items: [
{
xtype: 'radiofield',
boxLabel: 'Fix Price'
},
{
xtype: 'radiofield',
boxLabel: 'Production'
}
]
},
{
xtype: 'textfield',
id: 'quotedPrice',
name: 'quotedPrice',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
id: 'clientPO',
name: 'clientPO',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
id: 'jobQuantity',
name: 'jobQuantity',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
id: 'filesOver',
name: 'filesOver',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
id: 'previousJobId',
name: 'previousJobId',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
id: 'estimate',
name: 'estimate',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},
{
xtype: 'panel',
title: 'Parts'
},
{
xtype: 'panel',
title: 'Process'
},
{
xtype: 'panel',
title: 'Invoice'
}
]
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'FooterPanel',
flex: 1
}
]
});
me.callParent(arguments);
}
});
问题在于如何建立记录。首先,
loadRecord
接受记录,而不是存储。下一个问题是,当您调用loadRecord
时,存储未加载。下面是解决这个问题的修改后的商店定义。基本上,您应该绑定到存储的load
事件,以确保记录已加载
var store = Ext.create('Ext.data.Store', {
model: 'user',
proxy: {
type: 'ajax',
url: 'data2.json',
reader: {
type: 'json',
root: 'user'
}
},
autoLoad: true,
listeners: {
load: function() {
var form = Ext.getCmp('formJobSummary');
form.loadRecord(store.data.first());
}
}
});
问题在于如何建立记录。首先,
loadRecord
接受记录,而不是存储。下一个问题是,当您调用loadRecord
时,存储未加载。下面是解决这个问题的修改后的商店定义。基本上,您应该绑定到存储的load
事件,以确保记录已加载
var store = Ext.create('Ext.data.Store', {
model: 'user',
proxy: {
type: 'ajax',
url: 'data2.json',
reader: {
type: 'json',
root: 'user'
}
},
autoLoad: true,
listeners: {
load: function() {
var form = Ext.getCmp('formJobSummary');
form.loadRecord(store.data.first());
}
}
});
你能提供
MyApp.view.ui.MyPanel
源代码吗?你能提供MyApp.view.ui.MyPanel
源代码吗?啊,明白了。谢谢你为我写下这个例子。我也完全错过了使用监听器。现在工作得很好。啊,明白了。谢谢你为我写下这个例子。我也完全错过了使用监听器。现在工作得很好。