Ext ComboBox 實現下拉多選，全選，反選

Ext ComboBox下拉選中-全選反選邏輯處理

---

Ext ComboBox 實現下拉多選，全選，反選

方法一：

1. 代碼

var me = this;
var isMultiSelect = true;//是否設置爲下拉多選
me.selectValues = [];//保存被選中的數據
var factory_Store = Ext.create('Ext.data.Store', {
    data : [  
        {name: '昆明', code: 'KM'},  
        {name: '楚雄', code: 'CX'},  
        {name: '曲靖', code: 'QJ'},  
        {name: '玉溪', code: 'YX'} 
    ]  
});

{
xtype : 'combobox',
store :factory_Store,
emptyText : '請選擇',//下拉框初始顯示字段
queryMode : 'local',
displayField : 'name',
valueField : 'code',
width : 370,
grow : true,
fieldLabel: '工廠',
value:factoryID,
name : 'factoryID',
multiSelect : isMultiSelect,//設置是否爲下拉多選
listeners : {
	select: function(combo, record, eOpts ){
		if(isMultiSelect){
			combo.setValue(me.selectValues);
		}
	}
},
listConfig : isMultiSelect ? {
    itemTpl : Ext.create('Ext.XTemplate','<input type=checkbox>{[values.name]}'),
    onItemSelect : function(record) {
        var node = this.getNode(record);
        if (node) {
            Ext.fly(node).addCls(this.selectedItemCls);
            var checkboxs = node.getElementsByTagName("input");
            if (checkboxs != null)
                var checkbox = checkboxs[0];
            checkbox.checked = true;
        }
    },
    listeners : {
        itemclick : function(view, record, item, index, e, eOpts) {
        	var AllCheckBox = {//factory全選框的code和name要與數據源（store）中的一致
        			code:"",
        			name:"所有"
        	};
        	var nodes = this.getNodes(record.store.data.items);
        	var check_boxs = [];
        	var checkAll_box = null;
        	Ext.each(nodes, function(item) {
        		var check_box = item.getElementsByTagName("input");
        		check_boxs.push(check_box[0]);
        		if(item.innerText == AllCheckBox.name){
        			checkAll_box = check_box[0];
        		}
        	});
        	
            var isSelected = view.isSelected(item);
            var isClickAll = false;
            if(record.data.code == AllCheckBox.code){
            	isClickAll = true;
            }
            
            if(isClickAll && !isSelected){//點擊全選框&&全選框沒有選中
            	Ext.each(check_boxs, function(item) {
            		item.checked = true;
            	});
        		var newValues = [];
        		Ext.each(record.store.data.items, function(item) {
        			newValues.push(item.data.code);
    			});
            	me.selectValues = newValues;
            }else if(isClickAll){//點擊全選框&&全選框沒有選中
            	Ext.each(check_boxs, function(item) {
            		item.checked = false;
            	});
            	me.selectValues = [];
            }else {//點擊其它選擇框
            	var dex = me.selectValues.indexOf(AllCheckBox.code);
            	if(dex >= 0){//檢查全選框是否被選中-是
            		var cancelChecks=[AllCheckBox.code,record.data.code];
            		Ext.each(cancelChecks, function(item) {
            			var cancel_dex = me.selectValues.indexOf(item);
                		if(cancel_dex >= 0){
                			me.selectValues.splice(cancel_dex,1);
                		}
                	});
            		checkAll_box.checked = false;
                }else{//否
                	if(!isSelected){
                		me.selectValues.push(record.data.code);
                	}else{
                		var cancel_dex = me.selectValues.indexOf(record.data.code);
                		if(cancel_dex >= 0){
                			me.selectValues.splice(cancel_dex,1);
                		}
                	}
                }
            	var checkboxs = item.getElementsByTagName("input");
        		if (checkboxs != null) {
                    var checkbox = checkboxs[0];
                    if (!isSelected) {
                        checkbox.checked = true;
                    } else {
                        checkbox.checked = false;
                    }
                }
            }
            
            if(me.selectValues.length + 1 == record.store.data.items.length){//檢查是不是除全選框外的其它選擇寬都被選中
            	me.selectValues.push(AllCheckBox.code);
            }
        }
    }
  }:{}
}

2. 效果圖