extjs的ComboBox 2级联动

学习了 EXTJS ，项目中也有2级联动的需要，现将代码写下来作为笔记

1 这里 EXTJS 环境 后台都不做介绍了。有兴趣的朋友可以下载源码来研究一下。下面只贴一写EXTJS 方面的代码。项目借用了STRUTS2一些东西，这里也不在做介绍。

2前台代码

 

function form(){
	
	var manufacturerid_store = new Ext.data.Store( {
		autoLoad : true,
		reader : new Ext.data.JsonReader( {
			totalRecords : "results",
			root : 'List'
		}, Ext.data.Record.create([ {
			name : 'id'
		}, {
			name : 'name'
		}])),
		proxy : new Ext.data.HttpProxy( {
			url : 'getlist.action'
		})
	});
	var deviceModel_store = new Ext.data.Store( {
		autoLoad : false,
		reader : new Ext.data.JsonReader( {
			totalProperty : "results",
			root : 'List'
		}, Ext.data.Record.create([ {
			name : 'id'
		}, {
			name : 'name'
		}])),
		proxy : new Ext.data.HttpProxy( {
			url : 'getlist2.action'
		})
	});
	var deviceModel_store;
	var form = new Ext.FormPanel( {
			id : 'tabpanel_seconde',
			//renderTo : 'grid-mdmsSoftwarePackUp_1',
			renderTo : 'form',
			title : '第二步',
			frame : true,
			labelAlign : 'right',
			buttonAlign : 'right',
			defaults : {
				width : 150
			},
			items : [new Ext.form.ComboBox( {
				width : 200,
				id:'secondeForm_manufacturerid',
				//blankText : '必须选择厂商标识',
				hiddenName : 'id',
				name : 'name',
				triggerAction : 'all',
				allowBlank : false,
				editable : false,// 禁止编辑
					//loadingText : '正在加载厂商标识',// 加载数据时显示的提示信息
					displayField : 'name',// 定义要显示的字段
					valueField : 'id',
					mode : 'remote',// 远程模式
					//emptyText : '请选择厂商标识',
					store : manufacturerid_store,
					fieldLabel : '省',
					listeners : {
						"select" : function() {
							var secondeForm_deviceModel=Ext.getCmp("secondeForm_deviceModel");
							secondeForm_deviceModel.reset();
							deviceModel_store.proxy = new Ext.data.HttpProxy( {
								url : 'getlist2.action?id='
										+ this.getValue()
							});
							deviceModel_store.load();
						}
					}
				}),
				new Ext.form.ComboBox( {
					id:'secondeForm_deviceModel',
					width : 200,
				    //blankText : '必须选择终端型号',
					hiddenName : 'id',
					name : 'name',
					allowBlank : false,
					triggerAction : 'all',
					editable : false,// 禁止编辑
					//loadingText : '正在加载终端型号',// 加载数据时显示的提示信息
					displayField : 'name',// 定义要显示的字段
					valueField : 'id',
					mode : 'remote',// 远程模式
					//emptyText : '请选择设备型号',
					store : deviceModel_store,
					fieldLabel : '市'
				})
				]
		});
}

    这里定义一个函数 其中前面2个是定义store是为了后台取得数据使用 定义一个form，里面有2个ComboBox.因为要实现2级联动，第一个ComboBox下拉后肯定要触发事件取得后台重新数据 所以实现原理也就是在该ComboBox 添加事件 见代码

listeners : {
						"select" : function() {
							var secondeForm_deviceModel=Ext.getCmp("secondeForm_deviceModel");
							secondeForm_deviceModel.reset();
							deviceModel_store.proxy = new Ext.data.HttpProxy( {
								url : 'getlist2.action?id='
										+ this.getValue()
							});
							deviceModel_store.load();
						}
					}

   该段代码调用后台取得数据重新刷新第个ComboBox的store值 从而实现了2级联动

   实现效果

  

 下来第一个ComboBox

 

 后面的市根据第一个ComboBox触发调用后台，切换省

源码附件中下载取得，可以自己运行没有数据库，后台数据时写死了（这里只是演示前台的技术，没搞那么复杂了）

评论

3 楼 wangcl011 2014-09-16  

多谢楼主，参考后个人实现实例代码：http://www.itdatum.net/webui/extjs/2014/09/7945.shtml

2 楼 ideaf 2014-04-17  

• secondeForm

引用

引用

引用

引用

引用

引用

1 楼 fuyu_oo 2012-10-11  

可以运行  多谢