extjs4 ComboBox 动态加载，联动，设置默认值，锁定等

EXTJS省市县联动实现

最新推荐文章于 2017-04-12 16:29:56 发布

原创最新推荐文章于 2017-04-12 16:29:56 发布 · 5.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#extjs4 #combobox #默认值 #动态加载

EXTJS 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用EXTJS实现省、市、县三级联动选择框。通过详细配置Combobox和Store，确保当只有一个匹配项时自动填充并锁定选择，同时加载下一级数据。

最近在搞EXTJS，当然就会碰到ComboBox 默认值的问题，结果在网上找了一堆，没有一个完善可用的。好不容易搞出来了，特此记录。

		var provinceStore = Ext.create('Ext.data.Store', {
			storeId : 'provinceStore',
		    autoSync: true,	//同步更新
		    fields: ['id', 'name', 'code', 'fathercode'],
		    proxy: {
		     	type: 'ajax',
		        url: 'areaAction!findProvinces.action',
		        reader: {
		            type: 'json',
		           	root: 'list'
		        }
		 	}
		});

		var cityStore = Ext.create('Ext.data.Store', {
			storeId : 'cityStore',
		    autoLoad: true,	//自动加载数据
		    autoSync: true,	//同步更新
		    fields: ['id', 'name', 'code', 'fathercode'],
		    proxy: {
		     	type: 'ajax',
		        url: 'areaAction!findCitys.action',
		        reader: {
		            type: 'json',
		           	root: 'list'
		        }
		 	}
		});

		var areaStore = Ext.create('Ext.data.Store', {
			storeId : 'areaStore',
		    autoLoad: true,	//自动加载数据
		    autoSync: true,	//同步更新
		    fields: ['id', 'name', 'code', 'fathercode'],
		    proxy: {
		     	type: 'ajax',
		        url: 'areaAction!findAreas.action',
		        reader: {
		            type: 'json',
		           	root: 'list'
		        }
		 	}
		});
		
		var provincecombobox = Ext.create('Ext.form.ComboBox', {
            name: 'sysuser.province',
            store: provinceStore,
            valueField: 'code',
            displayField: 'name',
            typeAhead: true,
            queryMode: 'local',
            emptyText: '请选择省份',
            width:120,
            listeners:{
                select:{
                    fn:function(combo,record,index) {
                    	formPanel.form.findField('sysuser.country').clearValue();
                    	formPanel.form.findField('sysuser.city').clearValue();
                    	formPanel.form.findField('sysuser.city').store.load({params:{'fatherID':combo.value}});
                   }
                }
                
             }
		});
		
		var citycombobox = Ext.create('Ext.form.ComboBox', {
            name: 'sysuser.city',
            store: cityStore,
            valueField: 'code',
            displayField: 'name',
            typeAhead: true,
            queryMode: 'local',
            emptyText: '请选择市',
            width:120,
            listeners:{
                select:{
                    fn:function(combo,record,index) {
                    	formPanel.form.findField('sysuser.country').clearValue();
                    	formPanel.form.findField('sysuser.country').store.load({params:{'fatherID':combo.value}});
                   }
                }
            }
		});
		
		var countrycombobox = Ext.create('Ext.form.ComboBox', {
            name: 'sysuser.country',
            store: areaStore,
            valueField: 'code',
            displayField: 'name',
            typeAhead: true,
            queryMode: 'local',
            emptyText: '请选择县',
            width:120
		});
		
		provinceStore.load();
		provinceStore.on("load", provinceStoreLoad, provinceStore, true);
        function provinceStoreLoad() {
            if (provinceStore.getTotalCount() == 1)
            {
            	formPanel.form.findField('sysuser.province').setValue(provinceStore.getAt(0).get('code'));
            	formPanel.form.findField('sysuser.province').setReadOnly(true);
            	formPanel.form.findField('sysuser.country').clearValue();
            	formPanel.form.findField('sysuser.city').clearValue();
            	formPanel.form.findField('sysuser.city').store.load({params:{'fatherID':provinceStore.getAt(0).get('code')}});
            }
        }
        
        cityStore.on("load", cityStoreLoad, cityStore, true);
        function cityStoreLoad() {
            if (cityStore.getTotalCount() == 1)
            {
            	formPanel.form.findField('sysuser.city').setValue(cityStore.getAt(0).get('code'));
            	formPanel.form.findField('sysuser.city').setReadOnly(true);
            	formPanel.form.findField('sysuser.country').clearValue();
            	formPanel.form.findField('sysuser.country').store.load({params:{'fatherID':cityStore.getAt(0).get('code')}});
            }
        }
        
        areaStore.on("load", areaStoreLoad, areaStore, true);
        function areaStoreLoad() {
            if (areaStore.getTotalCount() == 1)
            {
            	formPanel.form.findField('sysuser.country').setValue(areaStore.getAt(0).get('code'));
            	formPanel.form.findField('sysuser.country').setReadOnly(true);
            }
        }

上述代码，就是省市县的联动。这个是用在用户权限里的，当只查到一个省/市/县的时候，就锁定该省/市/县，并加载下一级的值。

引用的代码：

{
                xtype: 'fieldcontainer',
                fieldLabel: '区域',
                labelWidth:60,
                labelStyle : "text-align:right;width:60;",  
                layout: 'column',
                combineErrors: true,
                defaultType: 'textfield',
                defaults: {
                    hideLabel: 'true'
                },
                colspan: 2,
                items: [provincecombobox,citycombobox,countrycombobox]
            },

需要注意的是：

1、下拉框需要单独定义，不能直接在form里面再定义。

2、先定义store，再定义combobox，然后再给store设置触发事件，顺序不能乱。

3、看到网上很多地方说，必须要设置ID什么的，其实是错的。

以上。