省、市、县三级联动+回填数据,功能很简单,看代码片段:
// 省级 var gradeStore = new Ext.data.Store({ autoLoad : true, listeners :{ load:function(){ form_T_RESOURCE.form.findField('provinceCode').setValue('$!form.provinceCode'); } }, proxy : new Ext.data.HttpProxy({ url : 'resourceAction!getProvince.action' }), storeId : 'gradeStore', reader : new Ext.data.JsonReader({ root : 'root', fields : ["code", "id", "name"] }), remoteSort : true }); // 市级 var cs_store = new Ext.data.Store({ autoLoad : true, listeners :{ load:function(){ if(cs_store.find('code', '$!form.cityCode') > -1) { form_T_RESOURCE.form.findField('cityCode').setValue('$!form.cityCode'); } } }, proxy : new Ext.data.HttpProxy({ url : 'resourceAction!getCity.action?p=$!form.provinceCode' }), storeId : 'cs_store', reader : new Ext.data.JsonReader({ root : 'root', fields : ["code", "id", "name"] }), remoteSort : true }); // 县级 var x_store = new Ext.data.Store({ autoLoad : true, listeners :{ load:function(){ if(x_store.find('code', '$!form.countyCode') > -1) { form_T_RESOURCE.form.findField('countyCode').setValue('$!form.countyCode'); } } }, proxy : new Ext.data.HttpProxy({ url : 'resourceAction!getCounty.action?p=$!form.provinceCode&c=$!form.cityCode' }), storeId : 'x_store', reader : new Ext.data.JsonReader({ root : 'root', fields : ["code", "id", "name"] }), remoteSort : true }); var proCombo = new Ext.form.ComboBox({ hiddenName : 'provinceCode', editable : false, displayField : 'name', valueField : 'code', triggerAction : 'all', store : gradeStore, mode : 'remote', name : 'provinceCode', width : 100, height : 7, emptyText : '全部', listeners : { select : function(combo, record, index) { cityComb.clearValue(); countComb.clearValue(); cs_store.proxy = new Ext.data.HttpProxy({ url : 'resourceAction!getCity.action?p=' + combo.value }); cs_store.load(); } }, lazyInit : false }); var cityComb = new Ext.form.ComboBox({ hiddenName : 'cityCode', editable : false, displayField : 'name', valueField : 'code', triggerAction : 'all', store : cs_store, mode : 'remote', name : 'cityCode', height : 7, width : 100, emptyText : '全部', listeners : { select : function(combo, record, index) { countComb.clearValue(); x_store.proxy = new Ext.data.HttpProxy({ url : 'resourceAction!getCounty.action?p='+proCombo.getValue()+'&c=' + combo.value }); x_store.load(); } }, lazyInit : false }); var countComb = new Ext.form.ComboBox({ hiddenName : 'countyCode', editable : false, displayField : 'name', valueField : 'code', triggerAction : 'all', store : x_store, mode : 'remote', name : 'countyCode', width : 100, height : 26, emptyText : '全部', lazyInit : false });
您还没有登录,请您登录后再发表评论
例如,假设我们有三个级联的ComboBox:国家、省份和城市。首先,初始化国家的ComboBox,加载所有国家的数据。当用户选择一个国家后,根据所选国家的ID,通过Ajax请求获取对应的省份数据,然后加载到省份的ComboBox中...
很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在...
4.4.7. 露一小手,组合上面所知,省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的,所有数据都在本地 4.4.7.2. 再做一个有后台的,需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据的...
- **Combobox 三级联动**:实现级联选择框的功能。 #### 5. 员工管理系统 - **准备工作**:规划项目结构和所需技术栈。 - **框架的搭建**:配置 Extjs 和后端服务。 - **菜单的实现**:创建导航菜单。 - **实现...
- **Combobox三级联动**:实现级联选择框,用于展示层次关系的数据。 #### 5. 员工管理系统 最后,本章节通过构建一个简单的员工管理系统来综合运用前面所学的知识点。 - **准备工作**:介绍项目开始前所需的准备...
相关推荐
例如,假设我们有三个级联的ComboBox:国家、省份和城市。首先,初始化国家的ComboBox,加载所有国家的数据。当用户选择一个国家后,根据所选国家的ID,通过Ajax请求获取对应的省份数据,然后加载到省份的ComboBox中...
很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在...
4.4.7. 露一小手,组合上面所知,省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的,所有数据都在本地 4.4.7.2. 再做一个有后台的,需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据的...
4.4.7. 露一小手,组合上面所知,省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的,所有数据都在本地 4.4.7.2. 再做一个有后台的,需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据的...
- **Combobox 三级联动**:实现级联选择框的功能。 #### 5. 员工管理系统 - **准备工作**:规划项目结构和所需技术栈。 - **框架的搭建**:配置 Extjs 和后端服务。 - **菜单的实现**:创建导航菜单。 - **实现...
- **Combobox三级联动**:实现级联选择框,用于展示层次关系的数据。 #### 5. 员工管理系统 最后,本章节通过构建一个简单的员工管理系统来综合运用前面所学的知识点。 - **准备工作**:介绍项目开始前所需的准备...