Extjs 隐藏/显示“复选框模型”列答案

【问题标题】：Extjs Hide/Show 'checkbox model' columnExtjs 隐藏/显示“复选框模型”列
【发布时间】：2019-08-02 15:24:10
【问题描述】：

我创建了一个复选框列：

selModel: {
        selType: 'checkboxmodel',
        checkOnly: false,
        showHeaderCheckbox: true,
        injectCheckbox:'last',
},

listeners: {
        selectionchange: 'onSelectionChange'
},

它适用于我需要的功能。

我唯一的问题是，我希望当用户在菜单中选择该列时显示/隐藏该列，而该列是图片中的其他列（名称、标识符等）下面：

我该如何实现？

我还检查了存在 xtype: 'checkcolumn' 但我看到这并不容易，因为在 checkboxmodel 中实现了选择所有项目 ecc 之类的操作。

【问题讨论】：

标签： checkbox extjs toolbar

【解决方案1】：

您可以在“显示和隐藏复选框”列的列标题中向menu 添加额外的项目。

var showFunction = function() {
    grid.columnManager.headerCt.getGridColumns()[0].show();
    var menu = grid.headerCt.getMenu();
    var menuItem = menu.add({
        text: 'Hide Checkbox',
        handler: hideFunction
    });
};

var hideFunction = function() {
    grid.columnManager.headerCt.getGridColumns()[0].hide();
    var menu = grid.headerCt.getMenu();
    var menuItem = menu.add({
        text: 'Show Checkbox',
        handler: showFunction
    });

};

var grid = Ext.create('Ext.grid.Panel', {
    (...)
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    selType: 'checkboxmodel',
    listeners: {
        afterrender: function(c) {
            var menu = c.headerCt.getMenu();
            var menuItem = menu.add({
                text: 'Hide Checkbox',
                handler: hideFunction
            });
        }
    }
});

小提琴示例：

https://fiddle.sencha.com/#fiddle/2ue9&view/editor

【讨论】：