extJs 下拉框联动实现代码
extJs 下拉框联动实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下://第一个下拉框varparentStore=newExt.data.Store({proxy:newExt.data.H...

复制代码 代码如下:

// 第一个下拉框

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({

//这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的

url: 'loadByParentid.action?parentid=1001'

}),

reader: new Ext.data.JsonReader({

root: 'list',

id: 'id'

}, [

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

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

])

});

{

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

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

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();

}

}

},{

xtype:'combo',

store: childStore,

valueField :"id",

displayField: "mc",

//数据是在本地

mode: 'local',

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

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

hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name

editable: false,//不允许输入

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

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

fieldLabel: '选择',

id : 'child_id',

name: 'child',

width: 400

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类