Extjs6.2实现分组全选利用标题添加checkbox

最新推荐文章于 2020-01-14 23:18:23 发布

Mr_JGuo

最新推荐文章于 2020-01-14 23:18:23 发布

阅读量1.1k

点赞数

分类专栏： Extjs 文章标签： Extjs javaScript

本文链接：https://blog.csdn.net/Mr_JGuo/article/details/93539385

版权

自己研究许久未果，后来在领导的帮助下在google搜索下找到示例。现在extjs已经不再流行，网上面的例子都已经不再适用。

贴网址：https://fiddle.sencha.com/fiddle/19rr?height=600

效果如图：

原文的代码有几个bug，第一是不能使用grouping的startCollapsed属性。因为原来的TPL渲染的视图会在再次渲染的过程中破坏。下文代码我会标注出来，目前发现的bug均已修复。

原文的选中逻辑只能使用{xtype: 'checkcolumn', dataIndex:'isChecked'}的方式，后续我添加了兼容设置grid的selModel: {type: 'checkboxmodel'}的方式，但是此方式我没有直接使用（由于原作者的代码里面大部分用了checkDataIndex: 'isChecked'来做逻辑处理），因此使用者请注意可能出现bug。

/*************************************************
 * author :  unknown Netizen
 * function: CheckboxGroupingFeature
 * history:  created by MrJGuo 2019/5/31 17:58
 * warn：引用的grid请使用checkboxmodel模式(selModel: {type: 'checkboxmodel'})
 *              或者定义第一行{xtype: 'checkcolumn', dataIndex:'isChecked'}
 * forExample ：
 * Ext.create('Ext.grid.Panel', {
    title: 'Employees',
    store: store,
    selModel: {
                type: 'checkboxmodel',
            },
    columns: [ {
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Seniority',
        dataIndex: 'seniority'
    }],
    features: [{
        ftype: 'checkboxGrouping',
        enableGroupingMenu: false,
        hideGroupHeader: true
    }],
    width: 500,
    height: 600,
    renderTo: Ext.getBody()
});
 *************************************************/
Ext.define('SDE.ux.field.CheckboxGroupingFeature'