首先,两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源,这就是一个简单的二级联动的实现原理了. Js代码 // 第一个下拉框 var parentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: 'loadByParentid.action?parentid=1001' }), reader: new Ext.data.JsonReader({ root: 'list', id: 'id' }, [ {name: 'id', mapping: 'id'}, {name: 'mc', mapping: 'name'} ]) }); // 第二个下拉框 var childStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: '#' }), reader: new Ext.data.JsonReader({ root: 'list', id: 'id' }, [ {name: 'id', mapping: 'id'}, {name: 'mc', mapping: 'name'} ]) });
parentStore.load();
Ext.form.ComboBox({ fieldLabel: '请选择分类', xtype:'combo', store: parentStore, valueField :"id", displayField: "mc", mode: 'local', forceSelection: true,//必须选择一项 emptyText:'请选择分类...',//默认值 hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name editable: false,//不允许输入 triggerAction: 'all', id :'parent_id', name: 'parent', width: 400, listeners:{ select : function(combo, record,index){ childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value}); childStore.load(); } } });
Ext.form.ComboBox({ xtype:'combo', store: childStore, valueField :"id", displayField: "mc", //数据是在本地 mode: 'local', forceSelection: true,//必须选择一项 emptyText:'请选择子分类...',//默认值 hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name editable: false,//不允许输入 triggerAction: 'all', fieldLabel: '选择', id : 'child_id', name: 'child', width: 400 });
转播
