皆さんが大丈夫であることを願っています。次の問題は、ExtJS 4 で 2 つのコンボを使用することです (実際、これは私がやろうとしている例ですが、目的の結果が得られません)。
私の目標は、1 つのコンボを使用し、そのアイテムの 1 つを選択することによって、2 番目のコンボが異なるデータを表示することです (Country-State-City コンボ セットを実装するには、この演習を完了する必要があります)。すべてが例なので、まったく意味がありませんでしたが、機能性は私が必要としているものです。
私のコードは次のとおりです。
<script type="text/javascript">
Ext.require([
'Ext.form.field.ComboBox',
'Ext.form.FieldSet',
'Ext.tip.QuickTipManager',
'Ext.data.*'
]);
Ext.define('State', { //Define state model
extend: 'Ext.data.Model',
fields: [
{ type: 'integer', name: 'conse' },
{ type: 'string', name: 'abbr' },
{ type: 'string', name: 'name' },
{ type: 'string', name: 'slogan' }
]
});
Ext.define('User', { //Define user model
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'string' },
{ name: 'Name', type: 'string' },
]
});
Ext.onReady(function () {
var states = [
{ "conse": 1, "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" },
{ "conse": 2, "abbr": "AK", "name": "Alaska", "slogan": "The Land of the Midnight Sun" },
{ "conse": 3, "abbr": "AZ", "name": "Arizona", "slogan": "The Grand Canyon State" },
{ "conse": 4, "abbr": "AR", "name": "Arkansas", "slogan": "The Natural State" },
{ "conse": 5, "abbr": "CA", "name": "California", "slogan": "The Golden State" },
{ "conse": 6, "abbr": "CO", "name": "Colorado", "slogan": "The Mountain State" },
{ "conse": 7, "abbr": "CT", "name": "Connecticut", "slogan": "The Constitution State" },
{ "conse": 8, "abbr": "DE", "name": "Delaware", "slogan": "The First State" },
{ "conse": 9, "abbr": "DC", "name": "District of Columbia", "slogan": "The Nation's Capital" },
{ "conse": 10, "abbr": "FL", "name": "Florida", "slogan": "The Sunshine State" },
{ "conse": 11, "abbr": "GA", "name": "Georgia", "slogan": "The Peach State" },
{ "conse": 12, "abbr": "HI", "name": "Hawaii", "slogan": "The Aloha State" },
{ "conse": 13, "abbr": "ID", "name": "Idaho", "slogan": "Famous Potatoes" },
{ "conse": 14, "abbr": "IL", "name": "Illinois", "slogan": "The Prairie State" },
{ "conse": 15, "abbr": "IN", "name": "Indiana", "slogan": "The Hospitality State" },
{ "conse": 16, "abbr": "IA", "name": "Iowa", "slogan": "The Corn State" },
{ "conse": 17, "abbr": "KS", "name": "Kansas", "slogan": "The Sunflower State" },
{ "conse": 18, "abbr": "KY", "name": "Kentucky", "slogan": "The Bluegrass State" },
{ "conse": 19, "abbr": "LA", "name": "Louisiana", "slogan": "The Bayou State" },
{ "conse": 20, "abbr": "ME", "name": "Maine", "slogan": "The Pine Tree State" },
{ "conse": 21, "abbr": "MD", "name": "Maryland", "slogan": "Chesapeake State" },
{ "conse": 22, "abbr": "MA", "name": "Massachusetts", "slogan": "The Spirit of America" },
{ "conse": 23, "abbr": "MI", "name": "Michigan", "slogan": "Great Lakes State" },
{ "conse": 24, "abbr": "MN", "name": "Minnesota", "slogan": "North Star State" },
{ "conse": 25, "abbr": "MS", "name": "Mississippi", "slogan": "Magnolia State" },
{ "conse": 26, "abbr": "MO", "name": "Missouri", "slogan": "Show Me State" },
{ "conse": 27, "abbr": "MT", "name": "Montana", "slogan": "Big Sky Country" },
{ "conse": 28, "abbr": "NE", "name": "Nebraska", "slogan": "Beef State" },
{ "conse": 29, "abbr": "NV", "name": "Nevada", "slogan": "Silver State" },
{ "conse": 30, "abbr": "NH", "name": "New Hampshire", "slogan": "Granite State" },
{ "conse": 31, "abbr": "NJ", "name": "New Jersey", "slogan": "Garden State" },
{ "conse": 32, "abbr": "NM", "name": "New Mexico", "slogan": "Land of Enchantment" },
{ "conse": 33, "abbr": "NY", "name": "New York", "slogan": "Empire State" },
{ "conse": 34, "abbr": "NC", "name": "North Carolina", "slogan": "First in Freedom" },
{ "conse": 35, "abbr": "ND", "name": "North Dakota", "slogan": "Peace Garden State" },
{ "conse": 36, "abbr": "OH", "name": "Ohio", "slogan": "The Heart of it All" },
{ "conse": 37, "abbr": "OK", "name": "Oklahoma", "slogan": "Oklahoma is OK" },
{ "conse": 38, "abbr": "OR", "name": "Oregon", "slogan": "Pacific Wonderland" },
{ "conse": 49, "abbr": "PA", "name": "Pennsylvania", "slogan": "Keystone State" },
{ "conse": 40, "abbr": "RI", "name": "Rhode Island", "slogan": "Ocean State" },
{ "conse": 41, "abbr": "SC", "name": "South Carolina", "slogan": "Nothing Could be Finer" },
{ "conse": 42, "abbr": "SD", "name": "South Dakota", "slogan": "Great Faces, Great Places" },
{ "conse": 43, "abbr": "TN", "name": "Tennessee", "slogan": "Volunteer State" },
{ "conse": 44, "abbr": "TX", "name": "Texas", "slogan": "Lone Star State" },
{ "conse": 45, "abbr": "UT", "name": "Utah", "slogan": "Salt Lake State" },
{ "conse": 46, "abbr": "VT", "name": "Vermont", "slogan": "Green Mountain State" },
{ "conse": 47, "abbr": "VA", "name": "Virginia", "slogan": "Mother of States" },
{ "conse": 48, "abbr": "WA", "name": "Washington", "slogan": "Green Tree State" },
{ "conse": 49, "abbr": "WV", "name": "West Virginia", "slogan": "Mountain State" },
{ "conse": 50, "abbr": "WI", "name": "Wisconsin", "slogan": "America's Dairyland" },
{ "conse": 51, "abbr": "WY", "name": "Wyoming", "slogan": "Like No Place on Earth" }
];
var store = Ext.create('Ext.data.Store', { //Store for the STATES
model: 'State',
data: states
});
//In this otherStore, i'll save the Categories data
var otherStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/Categories',
reader: {
type: 'json',
root: 'Categories'
}
}
});
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
id: 'simpleCombo',
store: otherStore,
displayField: 'Name',
valueField: 'Id',
queryMode: 'local',
triggerAction: 'all',
emptyText: 'Select a category...',
renderTo: 'simpleCombo',
listeners: {
select: function (combo, record, index) {
alert(combo.getValue());
}
}
});
var anotherCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select a single state',
store: store,
displayField: 'name',
valueField: 'conse',
queryMode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'State',
selectOnFocus: true,
renderTo: 'anotherCombo'
});
anotherCombo.on('select',function(cmb,record,index){
simpleCombo.enable();
simpleCombo.clearValue();
otherStore.load({
params:{
id:cmb.getValue()
}
});
},this);
});
</script>
わかりました、私がやろうとしていること、何が機能していて何が機能していないかを説明しましょう。ステートは otherCombo にロードされます。そこで、その項目の 1 つを選択すると、conse 値がサーバーに送信されます (.NET の MVC は目的のために正常に動作しているため、コードを入れていません)。conse 値は、simpleCombo に読み込まれるアイテムの数を示します。初めて、すべてがうまくいくようです。写真はこちらです。
アリゾナ（アイテム番号3）を選択したので、3つのアイテムがロードされています。わかりました、それはうまくいきましたが、2回目にotherComboから他のアイテムを選択します:
アラスカ（アイテム番号2）を選択すると、2つのアイテムが読み込まれますよね？しかし、何か問題が発生しています。何かがまだロードされているように見えますが、データが正しく変更されていることがわかります。
それが私の問題です。私はさまざまな例を見てきましたが、うまくいっていると思われます。
あなたが私を助けてくれることを願っています！:D
事前にどうもありがとうございました。