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