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

}