Extjs Hide/Show 'checkbox model' 专栏

Question

我创建了一个复选框列：

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

listeners: {
        selectionchange: 'onSelectionChange'
},

它可以满足我需要的功能。

我唯一的问题是，当用户 select 在菜单中显示其他列（名称，标识符等）如下图：

我该如何实现？

我还检查是否存在 xtype: 'checkcolumn' 但我看到它并不容易，因为在 checkboxmodel 中实现像 select all items ecc 这样的操作.

Answer 1

您可以在 menu 列 header 中添加额外的项目以显示和隐藏复选框列。

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

fiddle 上的示例：

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

Extjs Hide/Show 'checkbox model' 专栏

Extjs Hide/Show 'checkbox model' column

checkbox

extjs

toolbar