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

我创建了一个复选框列，其中包含：

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

listeners: {
        selectionchange: 'onSelectionChange'
},

而且它可以满足我需要的功能

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

我如何实现这一点

我还检查是否存在xtype:“checkcolumn”，但我发现使用它并不容易，因为在checkboxmodel中实现了诸如select all items ecc之类的操作

您可以在列标题的菜单中添加额外的项，以显示和隐藏复选框列

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

小提琴的例子：