ExtJS 4 select multiple CheckColumn checkboxes with checkbox header

Question

I have a column of checkcolumn type to enable toggling boolean values. I'd like to be able to toggle all rows for that value at once. Ideally, I'd be able to add a checkbox to the checkcolumn header and listen for changes. Is that possible?

I'd like to note that I am not looking for a checkboxmodel to select rows.

Bluenose

Answer 1

I have created an updated version of the Ext.ux.CheckColumn for this, just include this code after the extjs code is included:

Ext.define('Ext.ux.CheckColumn', {
    extend: 'Ext.grid.column.Column',
    alias: 'widget.checkcolumn',

    disableColumn: false,
    disableFunction: null,
    disabledColumnDataIndex: null,
    columnHeaderCheckbox: false,

    constructor: function(config) {

        var me = this;
        if(config.columnHeaderCheckbox)
        {
            var store = config.store;
            store.on("datachanged", function(){
                me.updateColumnHeaderCheckbox(me);
            });
            store.on("update", function(){
                me.updateColumnHeaderCheckbox(me);
            });
            config.text = me.getHeaderCheckboxImage(store, config.dataIndex);
        }

        me.addEvents(
            /**
             * @event checkchange
             * Fires when the checked state of a row changes
             * @param {Ext.ux.CheckColumn} this
             * @param {Number} rowIndex The row index
             * @param {Boolean} checked True if the box is checked
             */
            'beforecheckchange',
            /**
             * @event checkchange
             * Fires when the checked state of a row changes
             * @param {Ext.ux.CheckColumn} this
             * @param {Number} rowIndex The row index
             * @param {Boolean} checked True if the box is checked
             */
            'checkchange'
        );

        me.callParent(arguments);
    },

    updateColumnHeaderCheckbox: function(column){
        var image = column.getHeaderCheckboxImage(column.store, column.dataIndex);
        column.setText(image);
    },

    toggleSortState: function(){
        var me = this;
        if(me.columnHeaderCheckbox)
        {
            var store = me.up('tablepanel').store;
            var isAllChecked = me.getStoreIsAllChecked(store, me.dataIndex);
            store.each(function(record){
                record.set(me.dataIndex, !isAllChecked);
                record.commit();
            });
        }
        else
            me.callParent(arguments);
    },

    getStoreIsAllChecked: function(store, dataIndex){
        var allTrue = true;
        store.each(function(record){
            if(!record.get(dataIndex))
                allTrue = false;
        });
        return allTrue;
    },

    getHeaderCheckboxImage: function(store, dataIndex){

        var allTrue = this.getStoreIsAllChecked(store, dataIndex);

        var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader'];

        if (allTrue) {
            cls.push(cssPrefix + 'grid-checkheader-checked');
        }
        return '<div class="' + cls.join(' ') + '">&#160;</div>'
    },

    /**
     * @private
     * Process and refire events routed from the GridView's processEvent method.
     */
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
        if (type == 'mousedown' || (type == 'keydown' && (e.getKey() == e.ENTER || e.getKey() == e.SPACE))) {
            var record = view.panel.store.getAt(recordIndex),
                dataIndex = this.dataIndex,
                checked = !record.get(dataIndex),
                column = view.panel.columns[cellIndex];
            if(!(column.disableColumn || record.get(column.disabledColumnDataIndex) || (column.disableFunction && column.disableFunction(checked, record))))
            {
                if(this.fireEvent('beforecheckchange', this, recordIndex, checked, record))
                {
                    record.set(dataIndex, checked);
                    this.fireEvent('checkchange', this, recordIndex, checked, record);
                }
            }
            // cancel selection.
            return false;
        } else {
            return this.callParent(arguments);
        }
    },

    // Note: class names are not placed on the prototype bc renderer scope
    // is not in the header.
    renderer : function(value, metaData, record, rowIndex, colIndex, store, view){
        var disabled = "",
            column = view.panel.columns[colIndex];
        if(column.disableColumn || column.disabledColumnDataIndex || (column.disableFunction && column.disableFunction(value, record)))
            disabled = "-disabled";
        var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader' + disabled];

        if (value) {
            cls.push(cssPrefix + 'grid-checkheader-checked' + disabled);
        }
        return '<div class="' + cls.join(' ') + '">&#160;</div>';
    }
});

then an example setup of a checkbox column would be like this:

{
    xtype: "checkcolumn",
    columnHeaderCheckbox: true,//this setting is necessary for what you want
    store: (you need to put the grids store here),
    sortable: false,
    hideable: false,
    menuDisabled: true,
    dataIndex: "value_flag",
    listeners: {
        checkchange: function(column, rowIndex, checked){
             //code for whatever on checkchange here
        }
    }
}

Looks like this:

Cruel

Oh, make sure to dump the old checkcolumn from your includes on the page :) – Cruel

The only problem with this is that 'checkchange' isn't fired when you click on the checkbox in the header. Is there a solution for that? Otherwise this is exactly what I needed, thanks!! – Offen

I'm assuming you want it to fire for all the checkboxes that change when the header state is changed then? I may make an update to my version of this, if I do, I will notify you of the changes. This may be negatively affecting my code somewhere. – Cruel

Is this valid for Extjs 4.2.x? I will try myself and update here unless someone already knows the answer... – Maxma

I do believe that it doesn't work with Extjs 4.2 onwards due to the restructuring of the grid component. – Cruel

Answer 2

I created a patch based on the code provided by @Reimius. It only calls getStoreIsAllChecked method when necessary to improve the performance a bit. It also supports Extjs 4.2 Hope it's helpful.

https://github.com/twinssbc/extjs-CheckColumnPatch

Capetian

Good work , my friend! It really, really saved me, thanks a lot! – Amsden

I have to use checkcolumn event. How do i do here? – Ernestinaernestine

Answer 3

You should use this setting if you are using ExtJS 6.5.2 or above.

{ 
  xtype: 'checkcolumn',
  headerCheckbox: true, // THIS OPETION SHOW YOU CHECKBOX ON HEADER.
  sortable: false, // THIS OPTION DISABLE SORTING.
  hideable: false, // THIS OPTION EXCLUDE COLUMN FORM MENU.
  menuDisabled: true, //THIS OPTION HIDE MENU ON THE HEADER.
  dataIndex: 'isChecked',
  width: 25
}

Output will be like this.

Thumbs up if you like this suggestion.

Osuna

Answer 4

Using the approach from bocong above did not work for me out of the box: the header checkbox was showing up unchecked and did not toggle its state on click (it also looked a little funky, was cut off just a tad on the left side).

I modified (and simplified greatly) the code from bocong above to get it to work well for ExtJS 4.2.1 (copying the necessary markup from a regular row's checkbox):

getHeaderCheckboxImage: function (allChecked) {
    return '<img class="x4-grid-checkcolumn ' + ( allChecked ? 'x4-grid-checkcolumn-checked' : '' ) + '">';    
}

It seems to work great!

Newberry

Answer 5

Do

**

 selModel: {
   selType: 'checkboxmodel',
   showHeaderCheckbox: true
 }

**

For more detail refer:

http://docs.sencha.com/extjs/5.1.0/api/Ext.selection.CheckboxModel.html#cfg-showHeaderCheckbox

Prosser