Extjs下ComboBox实现级联

<SPAN style="FONT-SIZE: 18px"> //**测试下拉框级联**

var storedm = new Ext.data.Store({ //队名称下拉框

proxy: new Ext.data.HttpProxy({

url: '../servlet/CommonMethod?command=getdm'

}),

reader: new Ext.data.JsonReader({

root: 'dms',

id: 'id'

}, [

{name: 'id', mapping: 'id'},

{name: 'mc', mapping: 'mc'}

])

});

var storejh = new Ext.data.Store({ //井号选择下拉框

proxy: new Ext.data.HttpProxy({

url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的

}),

reader: new Ext.data.JsonReader({

root: 'jhs',

id: 'jh'

}, [

{name: 'jh', mapping: 'jh'},

{name: 'jm', mapping: 'jm'}

])

});



</SPAN>

//**测试下拉框级联**
var storedm = new Ext.data.Store({ //队名称下拉框
proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({ root: 'dms', id: 'id' }, [ {name: 'id', mapping: 'id'}, {name: 'mc', mapping: 'mc'} ]) }); var storejh = new Ext.data.Store({ //井号选择下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的 }), reader: new Ext.data.JsonReader({ root: 'jhs', id: 'jh' }, [ {name: 'jh', mapping: 'jh'}, {name: 'jm', mapping: 'jm'} ]) });


[javascript]
<SPAN style="FONT-SIZE: 18px"> //**测试下拉框级联**

var storedm = new Ext.data.Store({ //队名称下拉框

proxy: new Ext.data.HttpProxy({

url: '../servlet/CommonMethod?command=getdm'

}),

reader: new Ext.data.JsonReader({

root: 'dms',

id: 'id'

}, [

{name: 'id', mapping: 'id'},

{name: 'mc', mapping: 'mc'}

])

});



var storejh = new Ext.data.Store({ //井号选择下拉框

proxy: new Ext.data.HttpProxy({

url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的

}),

reader: new Ext.data.JsonReader({

root: 'jhs',

id: 'jh'

}, [

{name: 'jh', mapping: 'jh'},

{name: 'jm', mapping: 'jm'}

])

}); </SPAN>

//**测试下拉框级联** var storedm = new Ext.data.Store({ //队名称下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getdm' }), reader: new Ext.data.JsonReader({ root: 'dms', id: 'id' }, [ {name: 'id', mapping: 'id'}, {name: 'mc', mapping: 'mc'} ]) }); var storejh = new Ext.data.Store({ //井号选择下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的 }), reader: new Ext.data.JsonReader({ root: 'jhs', id: 'jh' }, [ {name: 'jh', mapping: 'jh'}, {name: 'jm', mapping: 'jm'} ]) });


[javascript]
<SPAN style="FONT-SIZE: 18px"> //单位字段

var dwField = new Ext.form.ComboBox({

fieldLabel:'所属队',

name:'DW',

//hiddenName:'DW',//hiddenName才是提交到后台的input的name（既select的value值）

allowBlank:false,

mode: 'local',

readOnly:true,

triggerAction:'all',

anchor:'90%',

emptyText:'请选择...',//默认值

store:storedm,

listeners:{

select : function(combo, record,index)

{

jhField.clearValue(); //可以实现当队下拉值变更时，清空之前井号下拉选项中的值



storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变，动态取出对应的井



storejh.load(); //加载井下拉框的store

}

},

listClass: 'x-combo-list-small', //测试的属性

lastQuery:'', //测试的属性

valueField: 'id',

displayField: 'mc'

});



storedm.load(); //载入队下拉框的信息



//井号字段

var jhField = new Ext.form.ComboBox({

xtype:'combo',

store: storejh,

valueField :"jh",

displayField: "jm",

//数据是在本地

mode: 'local',

//forceSelection: true,//必须选择一项

emptyText:'请选择井号...',//默认值

hiddenName:'JH',//hiddenName才是提交到后台的input的name（既select的value值）

editable: false,//不允许输入

triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。

allowBlank:false,//该选项值不能为空

fieldLabel: '井号',

id : 'jh_id',

name: 'JH',

anchor:'90%'

});

</SPAN>