ExtJs的ComboBox级联实现

1、首先定义store

//**测试下拉框级联**
 var storedm = new Ext.data.Store({   //队名称下拉框
     proxy: new Ext.data.HttpProxy({   
         url: '../servlet/CommonMethod?command=getdm'  
     }),   
     reader: new Ext.data.JsonReader({   
     root: 'dms',   
     id: 'id'
     }, [   
         {name: 'id', mapping: 'id'},   
         {name: 'mc', mapping: 'mc'}   
     ])   
    }); 
    
    var storejh = new Ext.data.Store({  //井号选择下拉框
     proxy: new Ext.data.HttpProxy({   
         url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
     }),   
     reader: new Ext.data.JsonReader({   
     root: 'jhs',   
     id: 'jh'  
     }, [   
         {name: 'jh', mapping: 'jh'},   
         {name: 'jm', mapping: 'jm'}   
     ])   
    });

 2、然后定义ComboBox

 //单位字段
    var dwField = new Ext.form.ComboBox({
		fieldLabel:'所属队',
		name:'DW',
		//hiddenName:'DW',//hiddenName才是提交到后台的input的name（既select的value值）   
		allowBlank:false,
	    mode: 'local',
	    readOnly:true,
	    triggerAction:'all',
	    anchor:'90%',
	    emptyText:'请选择...',//默认值   
	    store:storedm,
	    listeners:{     
            select : function(combo, record,index)
            {   
            	jhField.clearValue(); //可以实现当队下拉值变更时，清空之前井号下拉选项中的值
            	
            storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变，动态取出对应的井
                
            storejh.load(); //加载井下拉框的store   
            }   
        },
        listClass: 'x-combo-list-small', //测试的属性
        lastQuery:'', //测试的属性
		valueField: 'id',
	    displayField: 'mc'
	});
	
	storedm.load(); //载入队下拉框的信息
	
	//井号字段
    var jhField = new Ext.form.ComboBox({   
		   xtype:'combo',   
		   store: storejh,   
		   valueField :"jh",   
		   displayField: "jm",   
		   //数据是在本地   
		   mode: 'local',   
		   //forceSelection: true,//必须选择一项   
		   emptyText:'请选择井号...',//默认值   
		   hiddenName:'JH',//hiddenName才是提交到后台的input的name（既select的value值）   
		   editable: false,//不允许输入   
		   triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。   
		   allowBlank:false,//该选项值不能为空   
		   fieldLabel: '井号',   
		   id : 'jh_id',   
		   name: 'JH',   
		   anchor:'90%'  
    });

 

评论

6 楼 wangcl011 2014-09-19  

感谢分享，这是我参照写的在线实例：http://www.itdatum.net/webui/extjs/2014/09/7945.shtml

5 楼 alonewolf 2009-01-12  

dayone 写道

请教不敢当，我也刚学ext没多久，我想是不是前后端编码不一致引起的？我都是用UTF-8；

我后来用转码解决了，用的是UTF-8，只是get方法传参好像用的8859_1,
我转码后，ie下访问正常，ff下还不行，还是乱，就不知道什么原因。。。
ff下乱码显示是中文，但是很稀罕的那些中文，肯定还是编码不对，呵呵
ie下是正常的，奇怪

4 楼 dayone 2009-01-11  

alonewolf 写道

又来请教了， storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变，动态取出对应的井  在firebug里 combo.value正常 后台获取command参数的时候显示是？？？？？？ 是怎么回事呢？还请指教

请教不敢当，我也刚学ext没多久，我想是不是前后端编码不一致引起的？我都是用UTF-8；

3 楼 alonewolf 2009-01-10  

又来请教了，
storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变，动态取出对应的井 
在firebug里 combo.value正常
后台获取command参数的时候显示是？？？？？？
是怎么回事呢？还请指教

2 楼 alonewolf 2009-01-10  

因为在学习一个类似的系统，所以想请教。。。
若是不便就算了

1 楼 alonewolf 2009-01-10  

这是哪个钻井公司的项目？ 学习了
可否向在下介绍下项目的架构？
想学习下
email: [e-mail]