从技术上讲，此代码将起作用：
http://jsfiddle.net/sdt6585/wPzPD/29/
Ext.define('Country',{
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' }
]
});
Ext.define('CountryCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.countrycombo',
allowBlank: false,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
model: 'Country',
data: [
{ id: 'China', name: 'China'},
{ id: 'Japan', name: 'Japan'},
{ id: 'Malaysia', name: 'Malaysia'}
]
},
listeners: {
"select": function(obj){
Ext.Ajax.request({
url: '/CellEditing/FormServlet',
method: 'POST',
params: {
data: obj.getValue()
},
callback: function (response, operation) {
//This should be the text string in reponseText, just putting it there since I don't have it
response.responseText = '{data: [{state: "State One"}, {state: "State Two"}, {state: "State Three"}]}'
//Put this in your success function
var data = Ext.JSON.decode(response.responseText).data;
storeStates.loadData(data);
}
});
}
}
});
var storeStates = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['state']
});
Ext.define('State',{
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
});
Ext.define('StateCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.statecombo',
queryMode: 'local',
valueField: 'state',
displayField: 'state',
store: storeStates
});
Ext.form.Panel.create({
title: 'Tester',
renderTo: Ext.getBody(),
items: [
CountryCombo.create(),
StateCombo.create()
]
});
主要变化如下：
- 您需要在 ajax 调用的成功函数中解码使用 Ext.JSON.decode(response.responseText)) 返回的 json 字符串
- 您定义了一个状态模型，但状态存储没有使用它。它可以被移除。
- 除了在您的 json 字符串中，您在任何地方都将状态变量大写。将其更正为小写。
- 您对状态组合的引用仅针对该视图的模板类，而不是它的实例。另外，如果它是一个初始化的类，它的 store 属性就是这样定义的，与你的变量名无关。您可以存储对创建的组合框的引用并将其称为存储属性 loadData 函数，或者像我一样，只需使用 storeStates 对存储的引用来加载数据。
虽然这在技术上可行，但它并不是最优雅的解决方案。您将使用更多可维护的代码来遵循此过程。
- 为国家和州定义模型（最好不在全局命名空间中！！）并为状态存储提供代理以自动解码 json 响应。
- 定义使用模型作为基础的商店
- 为您的组合框定义视图（仅当它们将在其他地方重用时）
- 将组合框的实例放在某种容器中（使用 Ext.create() 或视图类的 create() 函数。
- 将侦听器附加到您创建的国家组合实例，并让它调用 stateCombo 商店的加载函数。
Ext.define('MyApp.models.Country',{
extend: 'Ext.data.Model',
requires: ['Ext.data.SequentialIdGenerator'],
idgen: 'sequential',
fields: [
{ name: 'name', type: 'string' }
]
});
Ext.define('MyApp.stores.Country', {
model: 'MyApp.models.Country',
data: [
{ name: 'China'},
{ name: 'Japan'},
{ name: 'Malaysia'}
]
});
Ext.define('MyApp.models.State',{
extend: 'Ext.data.Model',
requires: ['Ext.data.SequentialIdGenerator'],
idgen: 'sequential',
fields: [
{ name: 'state', type: 'string' }
],
proxy: {
type: 'ajax',
method: 'post',
url: '/CellEditing/FormServlet',
reader: {
type: 'json',
root: 'data',
successProperty: false
}
}
});
Ext.define('MyApp.stores.State', {
model: MyApp.models.State
});
Ext.define('MyApp.views.CountryCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.countrycombo',
allowBlank: false,
queryMode: 'local',
valueField: 'name',
displayField: 'name',
store: MyApp.stores.Country.create()
});
Ext.define('MyApp.views.StateCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.statecombo',
queryMode: 'local',
valueField: 'state',
displayField: 'state',
store: MyApp.stores.State.create()
});
Ext.form.Panel.create({
title: 'Tester',
renderTo: Ext.getBody(),
items: [
countryCombo = MyApp.views.CountryCombo.create(),
stateCombo = MyApp.views.StateCombo.create()
]
});
countryCombo.on('beforeselect', function (combo, record, index, eOpts) {
stateCombo.store.load({
params: {data: record.get('name')}
});
});
