Question

我创建了一个带有以下内容的复选框列：

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

listeners: {
        selectionchange: 'onSelectionChange'
},

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

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

我该如何实现？

我还检查了 xtype：'checkcolumn'的存在，但我发现这样做并不容易，因为在checkboxmodel中实施诸如选择所有ecc的操作。

Answer 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

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

1 个答案: