extjs的ComboBox 二级联动

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级联动

?? 实现效果

??
extjs的ComboBox 二级联动
?下来第一个ComboBox

?
extjs的ComboBox 二级联动
?后面的市根据第一个ComboBox触发调用后台，切换省

extjs的ComboBox 二级联动

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

1 楼 fuyu_oo 2012-10-11 可以运行多谢

extjs的ComboBox 二级联动

热点推荐