ExtJs4.2checkboxmodel返回上一页回显默认勾选问题

最新推荐文章于 2021-07-18 10:25:22 发布

原创最新推荐文章于 2021-07-18 10:25:22 发布 · 899 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ExtJs4.2 #checkboxmodel #翻页回显勾选

EXT4.2 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用ExtJS 4.2的CheckboxModel实现表格选择功能，包括自定义选择行为、全选操作及清除选择状态的方法。

ExtJs4.2checkboxmodel返回上一页回显默认勾选问题

思路
- 代码如下
- 清除勾选

思路

1.定义grid的selType的属性值为checkboxmodel
2.定义一个全局的数组属性arrayChecks来存入每次选择的数据的id
3.设置监听，监听勾选和取消勾选时从数组arrayChecks中加入勾选数据和移除勾选数据
4.设置selModel属性处理checkboxmodel，包括：
4.1:设置是否只能通过checkbox来选择
4.2:设置是否允许回显
4.3:对全选的操作，只要全选，就选择当前页全部数据，翻页时，未被全选，如果翻页全选时，全选框会默认勾选

需要注意的是：
model中的idProperty属性应该正确设置，不然会导致一些莫名的问题，回显默认勾选会失败，但Extjs不会给你报错！

在这里插入图片描述

代码如下

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