Ext二级联动

        项目需求：有两个下拉列表A和B。当你点击A列表里的一个值时，再点击B列表里面对应的值。也就是说，B列表的值是由A列表里的某个值决定的。B列表的值随A列表的值的不同而不同。由于使用了Ext作为表现层，所以不可避免的使用到了ComboBox。
        解决思路：点击A列表，从后台加载一条JSON格式的数据，然后在A列表里显示。当点击A列表里的某个值时，触发一个C事件。C事件将重新设置B列表，同时B列表从后台请求一条JSON格式的数据，同时B列表又加载新的数据源。
        好了，有了解决思路那就开始写代码吧。
        1、首先，我们定义一个groupDS和一个groupCombo。

var groupDS = new Ext.data.Store({
								proxy : new Ext.data.HttpProxy({
											url : 'getGroupsByUser.action'
										}),
								reader : new Ext.data.JsonReader({
											root : 'rows',
											totalProperty : 'total',
											id : 'groupId',
											fields : ['groupId', 'groupName']
										})
							});
					groupDS.load();

					var groupCombo = new Ext.form.ComboBox({
								// store: store,
								store : groupDS,
								fieldLabel : '分组',
								displayField : 'groupName',
								mode : 'local',
								emptyText : '请选择一个分组',
								valueField : 'groupId',
								hiddenName : 'groupId',
								anchor : '100%'

							});

        2、定义一个typeReader，一个typeDS和typeCombo。

var typeReader = new Ext.data.JsonReader({
								id : 'typeId',
								root : 'rows',
								totalProperty : 'total',
								fields : ['typeId', 'typeName', 'isIncome']
							});

					var typeDS = new Ext.data.Store({
								proxy : new Ext.data.HttpProxy({
											url : 'getTypesByUser.action'
										}),
								reader : typeReader
							});

					var typeCombo = new Ext.form.ComboBox({
								fieldLabel : '类型',
								store : typeDS,
								emptyText : '请选择一个类型',
								allowBlank : false,
								loadingText : 'searching...',
								displayField : 'typeName',
								mode : 'local',
								editable : true,
								valueField : 'typeId',
								hiddenName : 'typeId',
								anchor : '100%',
								triggerAction : 'all'
							});

        3、然后再定义一个选择事件。

groupCombo.on('select', function() {
								typeCombo.reset();
								typeDS.proxy = new Ext.data.HttpProxy({
											url : 'getTypesByUser.action?groupId='
													+ groupCombo.getValue()
								});
								typeDS.load();
					});

        好了，现在我们就完成了这个二级联动的小应用。同理，三级联动同样可以通过这种方式来实现。

评论

5 楼 yueyuxiang 2013-11-29  

有没有一种方式，选择按钮的时候不调用action，这样的话反应就会快很多！

4 楼 laitaogood 2009-11-21  

用手机发表一下我的看法

3 楼 awdrhwadr 2009-06-16  

以前用DWR做过一个，正好对比一下，学习学习

2 楼 laitaogood 2008-12-19  

fanke0000 写道

大哥！ 我按照你写的修改了一下，可是二级下拉没数据。

可能是你返回的数据有错误或者根本就没返回，请确认是否返回JSON格式的数据

1 楼 fanke0000 2008-12-19  

大哥！ 我按照你写的修改了一下，可是二级下拉没数据。

  var cityDS = new Ext.data.Store({   
                                proxy : new Ext.data.HttpProxy({   
                                            url : 'DATA/Area/GetAllCity.aspx'  
                                        }),   
                                reader : new Ext.data.JsonReader({   
                                            root : 'data',   
                                            totalProperty : 'total',   
                                            id : 'cityid',   
                                            fields : ['cityid', 'cityname']   
                                        })   
                            });   
                    cityDS.load();   
  
                    var cityCombo = new Ext.form.ComboBox({   
                                store : cityDS,   
                                fieldLabel : '市级',   
                                displayField : 'cityname',   
                                mode : 'local',   
                                emptyText : '请选择一个市级',   
                                valueField : 'cityid',   
                                hiddenName : 'cityid',   
                                anchor : '100%'  
  
                            });  


var countyReader = new Ext.data.JsonReader({   
                                id : 'countyid',   
                                root : 'data',   
                                totalProperty : 'total',   
                                fields : ['countyid', 'countyname', 'cityid']   
                            });   
  
                    var countyDS = new Ext.data.Store({   
                                proxy : new Ext.data.HttpProxy({   
                                            url : 'DATA/Area/getCountyByCity.aspx?cityId='  
                                        }),   
                                reader : countyReader   
                            });   
  
                    var countyCombo = new Ext.form.ComboBox({   
                                fieldLabel : '类型',   
                                store : countyDS,   
                                emptyText : '请选择一个类型',   
                                allowBlank : false,   
                                loadingText : 'searching...',   
                                displayField : 'countyname',   
                                mode : 'local',   
                                editable : true,   
                                valueField : 'countyid',   
                                hiddenName : 'countyid',   
                                anchor : '100%',   
                                triggerAction : 'all'  
                            });  


cityCombo.on('select', function() {   
                                countyCombo.reset();   
                                countyDS.proxy = new Ext.data.HttpProxy({   
                                            url : 'DATA/Area/getCountyByCity.aspx?cityId='  
                                                    + cityCombo.getValue()   
                                });   
                                countyDS.load();   
                    });