Ext ComboBox 实现下拉多选，全选，反选

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baidu_31134013/article/details/82839261

Ext ComboBox下拉选中-全选反选逻辑处理

---

Ext ComboBox 实现下拉多选，全选，反选
方法一：

• 代码

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);
            }
        }
    }
  }:{}
}

• 效果图