Extjs Hide/Show 'checkbox model' column

Question

I created a checkbox column with:

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

listeners: {
        selectionchange: 'onSelectionChange'
},

And it works goods for the functionality I need.

My only problem is that I would like that this column would be not always show but to be show/hide when the user select it in the menu where the are the other columns (Name, Identifier, etc. ) in the picture below:

How can I implement this?

I also check that exist xtype: 'checkcolumn' but I saw that with it is not easy as in checkboxmodel implement operations like select all items ecc.

Answer 1

You can add extra item to menu in column header to Show and Hide Checkbox column.

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

Example on fiddle:

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