Ext js 4 全选和反选

Ext版本:4.2

相信经常做Grid的一定遇到全选和反选吧,虽然Ext里有SelectionMode可以直接使用,但是面对较复杂的业务,SelectionMode也力不从心

于是自己定义一个CheckBox来自己添加全选反选功能,注意这里是反选是选择相反的,而不是英文deselect的取消选择的意思

1,先在Grid的columns里定义一个dom的CheckBox,同时给一个ID

ValuePanel = new Ext.grid.GridPanel({
            width: 200,
            tbar: [{
                xtype: 'checkboxgroup',
                vertical: true,
                width: 100,
                id:'CheckAll',
                items: [{
                    boxLabel: '全选', name: 'rb1', inputValue: '1', handler: function (a, v) {
                        if (a.checked == true) {
                            SelectAllToFieldList();
                            RefeshValue();
                        }
                        
                    }
                }, {
                    boxLabel: '反选', name: 'rb2', inputValue: '2', handler: function (a, v) {
                        if (a.checked==true) {
                            DeselectAllToFieldList();
                            RefeshValue();
                        }
                        
                    }
                }]
            }],
            region: "center",
            xtype: 'grid',
            store: storeFieldList,
            columns: [
                {
                    text: '选择', dataIndex: 'IsChecked', width: 35, renderer: function (v, r, s, i) {
                        var html = '<input id="cb_' + r.record.get('Key') + '" onclick="paraCheckBoxClick(this)" type="checkbox" />';
                        return html;
                    }
                },
                { text: '键', dataIndex: 'Key', hidden: true },
                { text: '参数字段', dataIndex: 'Value', width: 400 }],
            listeners: {
                itemdblclick: function (a, b, c, d, e) {
                    // 双击选择
                    Ext.getCmp('CheckAll').setValue({ rb1: false, rb2: false });
                    var cb = document.getElementById('cb_' + b.get('Key'));
                    cb.checked = !cb.checked;
                    if (cb.checked) {
                        AddFieldList(b.get('Key'));
                    } else {
                        DelFieldList(b.get('Key'));
                    }
                    RefeshValue();
                }
            }
 });

2,写相应的方法 

Array.prototype.baoremove = function (dx) {
    if (isNaN(dx) || dx > this.length) { return false; }
    this.splice(dx, 1);
}

function paraCheckBoxClick(cb) {
    // 取得Key
    var Key = cb.id.substr(3, cb.id.length - 3);
    if (cb.checked) {
        AddFieldList(Key);// 添加Key到list列表
    } else {
        DelFieldList(Key);// 删除Key到list列表
    }
    RefeshValue();// 刷新数据
}

// 已经选择的参数字段列表
var FieldList = [];

// 找到ID
function FindFieldListIDByKey(Key) {
    for (var i = 0; i < FieldList.length; i++) {
        if (FieldList[i] == Key) { return i; }
    }
    return -1;
}

// 添加已经选择的参数字段列表
function AddFieldList(Key) {
    if ($.inArray(Key, FieldList) < 0) {
        FieldList.push(Key);
    }

}
// 删除已经选择的参数字段列表
function DelFieldList(Key) {
    FieldList.baoremove(FindFieldListIDByKey(Key));
}

// 设置选项为选中状态
function SetChecked() {
    for (var i = 0; i < storeFieldList.data.length; i++) {
        // 取得要修改的数据对象的Key
        var Key = storeFieldList.getAt(i).get('Key');
        for (var j = 0; j < FieldList.length; j++) {
            if (FieldList[j].toUpperCase() == Key.toUpperCase()) {
                // 设置相关数据的IsChecked为当前选择框的Checked
                document.getElementById('cb_' + Key).checked = true;
            }
        }
    }
}
// 全选
function SelectAllToFieldList() {
    // 初始化list
    //FieldList.length = 0;

    // 设置当前页面为全选
    for (var i = 0; i < storeFieldList.data.length; i++) {
        // 取得要修改的数据对象的Key
        var Key = storeFieldList.getAt(i).get('Key');
        document.getElementById('cb_' + Key).checked = true;
        AddFieldList(Key);
    }

}

// 反选
function DeselectAllToFieldList() {

    // 设置当前页面为反选
    for (var i = 0; i < storeFieldList.data.length; i++) {
        // 取得要修改的数据对象的Key
        var Key = storeFieldList.getAt(i).get('Key');
        var cb = document.getElementById('cb_' + Key);
        document.getElementById('cb_' + Key).checked = !cb.checked;
        if (cb.checked) {
            AddFieldList(Key);
        } else {
            DelFieldList(Key);
        }
    }

}