Extjs下ComboBox实现级联 -

joyceyeah

浏览: 8372 次
性别:
来自: 福建

最近访客更多访客>>

sbwfgihc

yuermeizi

yanhua_it

haiyangyiba

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-09 ( 5)
更多存档...

Extjs下ComboBox实现级联

博客分类：

EXTJS

EXTJS ComboBox

//**测试下拉框级联**

 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'}

 ])

 });



//**测试下拉框级联**
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]
 //**测试下拉框级联**

 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'}

 ])

 }); 

//**测试下拉框级联** 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]
 //单位字段

 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%'

 });

分享到：