写两个数据源：
1.IM_ST_Module.js
{
success:true,
data:[
{ ModuleId: '1', ModuleName: '资讯' }
, { ModuleId: '2', ModuleName: '交流' }
, { ModuleId: '3', ModuleName: '图集' }
, { ModuleId: '4', ModuleName: '商品' }
]
}
2.IM_ST_Module_subl.js
{
success:true,
data: [
{ ModuleId_sub: '01', ModuleName_sub: '新闻',ModuleId:'1' }
, { ModuleId_sub: '02', ModuleName_sub: '文章',ModuleId:'1' }
, { ModuleId_sub: '03', ModuleName_sub: '娱乐',ModuleId:'1' }
, { ModuleId_sub: '04', ModuleName_sub: '下载',ModuleId:'1' }
, { ModuleId_sub: '11', ModuleName_sub: '交流01',ModuleId:'2' }
, { ModuleId_sub: '12', ModuleName_sub: '交流02',ModuleId:'2' }
, { ModuleId_sub: '13', ModuleName_sub: '交流03',ModuleId:'2' }
, { ModuleId_sub: '14', ModuleName_sub: '交流05',ModuleId:'2' }
, { ModuleId_sub: '21', ModuleName_sub: '图集21',ModuleId:'3' }
, { ModuleId_sub: '22', ModuleName_sub: '图集22',ModuleId:'3' }
, { ModuleId_sub: '23', ModuleName_sub: '图集23',ModuleId:'3' }
, { ModuleId_sub: '24', ModuleName_sub: '图集24',ModuleId:'3' }
, { ModuleId_sub: '25', ModuleName_sub: '图集25',ModuleId:'3' }
, { ModuleId_sub: '26', ModuleName_sub: '图集26',ModuleId:'3' }
, { ModuleId_sub: '31', ModuleName_sub: '商品31',ModuleId:'4' }
, { ModuleId_sub: '32', ModuleName_sub: '商品32',ModuleId:'4' }
, { ModuleId_sub: '33', ModuleName_sub: '商品33',ModuleId:'4' }
]
}
页面JS代码：
1.定义模型、 store
//下拉框模块数据开始
Ext.define("ModuleModel", {
extend: "Ext.data.Model",
fields:
[{ name: "ModuleId", type: "string" },
{ name: "ModuleName", type: "string" },
{ name: "ModuleId_sub", type: "string" },
{ name: "ModuleName_sub", type: "string" }]
}); var comboData_Module = Ext.create("Ext.data.Store", {
model: "ModuleModel",
autoLoad: true,
proxy: {
type: "ajax",
url: "/UI/Js/InformationManagement_Extjs4.2/Data/IM_ST_Module.js",
reader: {
type: "json",
root: "data"
}
}
}); var comboData_Module_sub = Ext.create("Ext.data.Store", {
model: "ModuleModel",
proxy: {
type: "ajax",
url: "/UI/Js/InformationManagement_Extjs4.2/Data/IM_ST_Module_subl.js",
reader: {
type: "json",
root: "data"
}
}
});
//下拉框模块数据结束
2.控件：combo
{
xtype: "fieldcontainer",
layout: "hbox",
items: [
{
xtype: 'combo',
name: 'ModuleId', allowBlank: false,
fieldLabel: '来自模块', width: 300,
store: comboData_Module,
emptyText: '选择模块...',
valueField: "ModuleId",
displayField: "ModuleName",
mode: 'local',//local
editable: false,
triggerAction: 'all',
allowBlank: false,
autoload: true,
listeners: {
change: function (field, newValue, oldValue, op) {
//当下拉框选择改变的时候，也就是原值不等于新值时
if (newValue != oldValue) {
//清空原来的下拉框
form_Step3_1_left.form.findField('ModuleIdsub').clearValue();
//过滤数据源
comboData_Module_sub.clearFilter();
comboData_Module_sub.filterBy(function (item) {
return item.get("ModuleId") == newValue;
});
//绑定数据源
form_Step3_1_left.form.findField('ModuleIdsub').bindStore(comboData_Module_sub);
}
}
}
},
{
xtype: 'combo',
name: 'ModuleIdsub', allowBlank: false,
fieldLabel: '', width: 200,
store: comboData_Module_sub,
emptyText: '选择子模块...',
valueField: "ModuleId_sub",
displayField: "ModuleName_sub",
mode: 'local',//local
editable: false,
triggerAction: 'all',
allowBlank: false
}
]
}
相关链接：http://www.cnblogs.com/mayantao/p/extjs4.html