ExtJs4.2checkboxmodel返回上一頁回顯默認勾選問題

ExtJs4.2checkboxmodel返回上一頁回顯默認勾選問題

思路

1.定義grid的selType的屬性值爲checkboxmodel
2.定義一個全局的數組屬性arrayChecks來存入每次選擇的數據的id
3.設置監聽,監聽勾選和取消勾選時從數組arrayChecks中加入勾選數據和移除勾選數據
4.設置selModel屬性處理checkboxmodel,包括:
4.1:設置是否只能通過checkbox來選擇
4.2:設置是否允許回顯
4.3:對全選的操作,只要全選,就選擇當前頁全部數據,翻頁時,未被全選,如果翻頁全選時,全選框會默認勾選

代碼如下

Ext.define('yourGridUrl', {
    extend: 'Ext.grid.Panel',
    xtype: 'yourGrid',
    alias: 'widget.yourGrid',
    store: 'yourStores',
    selType: 'checkboxmodel', // cellmodel
    plugins : [ 'tbarbtncontrol' ],
    border: false,
    overflowX: 'auto',
    layout: 'fit',
    width: 50,
    height : 400,
    stripeRows: true,
    arrayChecks: [],
    columns: [{
        dataIndex: 'id',
        text: '唯一標識',
        hideable : false,
        width: 70,
        hidden: true
    }, {
        dataIndex: 'name',
        text: '名稱',
        width: 70
    }],
    //分頁組件
    bbar: {
        xtype: 'pagingToolbar',
        store: 'yourStores',
        displayInfo: true
    },
    listeners: {
        select: function (data, receder, index) {
            var me = this;
            me.arrayChecks.push(receder.raw.id);
        },
        deselect : function (data, receder, index) {
            var me = this;
            var arrayChecks= me.arrayChecks;
            //根據元素進行刪除數組中的數據
            var index = arrayChecks.indexOf(receder.raw.id);
            arrayChecks.splice(index,1);
        }
    },
    selModel: {
        checkOnly: false,   //只能通過checkbox選擇
        pruneRemoved: false,
        onHeaderClick: function (headerCt, header, e) {
            isChecked = false;
            if (header.isCheckerHd) {
                e.stopEvent();
                var me = this,
                    isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
                me.preventFocus = true;
                if (isChecked) {
                    for (var i = 0; i < this.store.data.items.length; i++) {
                        this.deselect(this.store.data.getAt(i), null);
                    }
                } else {
                    me.selectAll();
                    header.el.addCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
                }
                delete me.preventFocus;
            }
        }
    }
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章