ext 二级联动 combobox
2016-06-01 16:36
295 查看
源代码
{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
});
相关文章推荐
- ext监听事件方法[初级篇]
- ext读取两种结构的xml的代码
- EXT富客户端后台管理系统 初步代码第1/2页
- ext实现完整的登录代码
- Ext第一周 史上最强学习笔记---GridPanel(基础篇)
- ext 列表页面关于多行查询的办法
- 用tip解决Ext列宽度不够的问题
- Ext 今日学习总结
- JavaScript的Ext JS框架中的GridPanel组件使用指南
- Ext JS框架中日期函数的用法及日期选择控件的实现
- Ext对基本类型的扩展 ext,extjs,format
- ExtJS 2.0实用简明教程 之Ext类库简介
- sencha ext js 6 快速入门(必看)
- ext jquery 简单比较
- flexigrid 类似ext grid的JS表格代码
- EXT中xtype的含义分析
- ext for eclipse插件安装方法
- 使Ext的Template可以解析二层的json数据的方法
- Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
- 利用Ext Js生成动态树实例代码