EXT.JS下拉框实现多选联动功能

{
    xtype:"combo",//combo为下拉框组件
	width:150,
	id: "bm",
	itemId: 'bm',
	labelWidth: 65,
	name: "bm",
	fieldLabel: "部门",
	store:Ext.create('Ext.data.Store', {
    fields: ['name', 'value', 'bm'],
    data: [
              { name: 'a', value: 'a1', bm: '1' },
              { name: 'b', value: 'b1', bm: '2' },
              { name: 'c', value: 'c2', bm: '3' }
            ]
          }), 
    editable: false,//输入框是否可以编辑输入
    displayField: "name",
	valueField: "value",
	triggerAction : 'all',
	mode:'local',//remote为远程，local为本地
	forceSelection: false,
	anyMatch: true,
	typeAhead : false,
	multiSelect: true, // 设置为多选模式
	//minChars :1,//自动完成激活之前填入的最小字符
	queryDelay : 1000,//查询延时，毫秒
  listeners: {
    select: function(combo, records) {
      var selectedValue = combo.getValue();
      var nameCombo = Ext.getCmp('pro');

      // 根据选中的值过滤第二个下拉框的数据
      nameCombo.getStore().clearFilter();
      nameCombo.getStore().filterBy(function(record) {
      return record.get('bm') === selectedValue;
      });

      // 重置第二个下拉框的选值
      nameCombo.reset();

		}
    }
								
},
{
    xtype:"combo",//combo为下拉框组件
	width:150,
	id: "pro",
	itemId: 'pro',
	labelWidth: 65,
	name: "name",
	fieldLabel: "人员",
	store:Ext.create('Ext.data.Store', {
    fields: ['name', 'value', 'bm'],
    data: [
              { name: 'aa', value: 'aa1', bm: '1' },
              { name: 'bb', value: 'ba1', bm: '1' },
              { name: 'cc', value: 'ca2', bm: '3' }
            ]
          }), //我这里写了方法来获取store，这里的store是你的下拉框数据来源
	editable: false,//输入框是否可以编辑输入
	displayField: "name",
	valueField: "code",
	triggerAction : 'all',
	mode:'local',//remote为远程，local为本地
	forceSelection: false,
	anyMatch: true,
	typeAhead : false,
	multiSelect: true, // 设置为多选模式
	//minChars :1,//自动完成激活之前填入的最小字符
	queryDelay : 1000,//查询延时，毫秒
	listeners:{ //监听器，并使用beforequery属性，来使其在点击查询按钮前触发，即不需要设置以
	            }
},