希望你们一切都好。我在使用 ExtJS 4 的两个组合时遇到了下一个问题(实际上,这是我正在尝试做的一个示例,但我无法获得所需的结果)。
我的目标是,使用一个组合并通过选择其中一个项目,第二个组合显示不同的数据(我需要完成这个练习来实现 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。在那里,当我选择它的一个项目时,我将 conse 值发送到服务器(.NET 中的 MVC,它可以正常工作,所以我没有放置它的代码)。conse 值表示将加载到 simpleCombo 中的项目数。第一次,一切似乎都很好。这是图片:
我选择了 Arizona(项目编号 3),因此加载了 3 个项目。好的,那个工作得很好,但是,我第二次从 otherCombo 中选择其他项目:
通过选择阿拉斯加(项目编号 2),加载了 2 个项目,好吗?但是,发生了一些错误,因为看起来仍在加载某些内容,但是您可以看到数据已正确更改。
那是我的问题。我看过不同的例子,它应该是有效的。
希望你能帮我!:D
非常感谢您提前。