技術的には、このコードは機能します。
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文字列を除くすべての場所で状態変数を大文字にしました。小文字に修正しました。
- 状態コンボへの参照は、そのビューのテンプレートクラスのみであり、そのインスタンスへの参照ではありませんでした。さらに、初期化されたクラスの場合、そのストアプロパティはそのように定義され、変数名とは関係ありません。作成したコンボボックスへの参照を保存して、そのストアプロパティのloadData関数を呼び出すか、または私が行ったように、ストアへのstoreStates参照を使用してデータをロードすることができます。
これは技術的には機能しますが、最も洗練されたソリューションではありません。このプロセスに従うには、はるかに保守しやすいコードを使用することになります。
- 国と州のモデルを定義し（理想的にはグローバル名前空間にない!!）、json応答を自動的にデコードするためのプロキシを州ストアに提供します。
- モデルをベースとして使用するストアを定義します
- コンボボックスのビューを定義します（他の場所で再利用される場合のみ）
- コンボボックスのインスタンスをある種のコンテナに配置します（ビュークラスのExt.create（）またはcreate（）関数を使用します。
- 作成したカントリーコンボのインスタンスにリスナーをアタッチし、stateComboのストアのload関数を呼び出させます。
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')}
});
});
