项目需求：有两个下拉列表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(); });
好了，现在我们就完成了这个二级联动的小应用。同理，三级联动同样可以通过这种方式来实现。
相关资源：ext combobox二级联动
