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

EXTJS省市县联动实现
本文介绍如何使用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什么的,其实是错的。


以上。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值