ext 二级联动 combobox

原创 2016年06月01日 16:36:53

源代码

{
xtype: 'combobox',
name: "areaid",
store: 'areainfoStore',
labelPad: 0,
labelWidth: 100,
allowBlank: false,
editable: false,
emptyText: '',
displayField: 'area',
fieldLabel: '地市',
valueField: 'areaid'
},
{
xtype: 'combobox',
id: 'hallinfoIdset',
name: "hallinfoId",
store: 'hallStore',
labelPad: 0,
labelWidth: 100,
allowBlank: false,
editable: false,
displayField: 'hallname',
fieldLabel: '营业厅',
valueField: 'hallid'
}



第一步 给第一个增加监听

{
xtype: 'combobox',
name: "areaid",
store: 'areainfoStore',
labelPad: 0,
labelWidth: 100,
allowBlank: false,
editable: false,
emptyText: '',
displayField: 'area',
fieldLabel: '地市',
valueField: 'areaid',
listeners: {
"select": function() {
var hallinfoIdset = Ext.getCmp("hallinfoIdset"); //获取第二个组件
hallinfoIdset_store = hallinfoIdset.store; //获取第二个组件的store
hallinfoIdset.reset();//重新设置当前表单项的值为开始载入的值并且清除验证信息。
hallinfoIdset.clearValue();//清除当前在ComboBox中设置的任何值
hallinfoIdset.setValue('');//设置组件值空
hallinfoIdset.setRawValue("");//设置选中值空
hallinfoIdset_store.removeAll();//从 store 中移除所有的条目
hallinfoIdset_store.reload({
url: "hallinfo/findListByAreaid.do",
params: {
areaid: this.getValue()//获取选中的值
}
})
}
}
},
{
xtype: 'combobox',
id: 'hallinfoIdset',
name: "hallinfoId",
store: 'hallStore',
labelPad: 0,
labelWidth: 100,
allowBlank: false,
editable: false,
displayField: 'hallname',
fieldLabel: '营业厅',
valueField: 'hallid'
},


第二步 页面初始化的时候

var hallinfoIdset = Ext.getCmp("hallinfoIdset");
hallinfoIdset_store = hallinfoIdset.store;
hallinfoIdset_store.load({
url: "hallinfo/findListByAreaid.do",
params: {
areaid: obj.areaid
}
});


第三步 第二下拉框store 设置URL

//必须设置要不然每次都会先默认加载一次

Ext.define('operator.store.hallStore', {
extend: 'Ext.data.Store',
model: 'operator.model.hallModel',
fields: ['hallid', 'hallname'],
proxy: {
type: 'ajax',
url: ' ',
// url : 'hallinfo/findHallinfo.do',
actionMethods: 'post',
reader: {
type: 'json'
}
},
autoLoad: false
});


相关文章推荐

Struts2结合EasyUI的combobox的二级联动json数组的返回

直接上代码:

JQuery EasyUI Combobox 实现省市二级联动菜单

JQuery EasyUI Combobox 实现省市二级联动菜单

Ext带图标Combobox

  • 2013年12月02日 18:26
  • 757KB
  • 下载

Ext->editgrid+combobox

  • 2011年07月11日 13:48
  • 7KB
  • 下载

可输入可联想的下拉列表的实现——Ext ComboBox

 网上这样的控件不少,有很多实现方法,其中不少的很巧妙。    例如:在文本框(HTML INPUT)后,添加一个隐藏层,隐藏层上放一个下拉列表,存储了所有可能的元素,每次文本框触发onpropert...

Ext ComboBox控件使用常见问题

1。ComboBox加载数据之后,ComboBox里面的值跑位,不能正确对应到ComboBox里面。 原因:因为要传name的值到服务器端,使用到了隐藏属性hiddeName来传值,hiddenNam...

ext下拉列表(ComboBox篇)

前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持! 上篇ExtJs2.0学习系列(5)--Ext.F...
  • hey_bei
  • hey_bei
  • 2013年07月02日 15:03
  • 975

Ext.form.ComboBox最常用的一些属性和方法

Js代码      id:'cbid',         name:'year',//name只是改下拉的名称         hiddenName:'hyear',//提交到后台的input的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ext 二级联动 combobox
举报原因:
原因补充:

(最多只允许输入30个字)