ExtJS 4 select multiple CheckColumn checkboxes with checkbox header

Question

I have a column of type checkcolumn that allows me to switch boolean values. I would like to be able to simultaneously switch all rows for this value. Ideally, I could add a check box to the checkcolumn header and listen for the changes. Is it possible?

I would like to note that I am not looking for checkboxmodel to select strings.

Answer 1

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

 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 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 of setting a flag column would be:

 { 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 } } } 

It looks like:

Answer 2

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

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

Answer 3

Using the approach from bocong above did not work for me out of the box: the header flag was displayed unchecked and did not switch its state to click (it also looked a bit scared, was cut off just a little on the left side).

I greatly changed (and simplified) the code from bocong above so that it works well for ExtJS 4.2.1 (by copying the necessary markup from a regular line):

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

Seems to work great!

Answer 4

You should use customization if you are using extjs 6.5.2 or higher.

 { 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 } 

The result will be like this.

Answer 5

Do

**

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

**

See details

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