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();});
好了，现在我们就完成了这个二级联动的小应用。同理，三级联动同样可以通过这种方式来实现。
页:
[1]