ExtJS 4 selecciona múltiples casillas CheckColumn con encabezado de casilla de verificación

extjs4 extjs4.1

Question

Tengo una columna de tipo checkcolumn para habilitar el cambio de valores booleanos. Me gustaría poder alternar todas las filas para ese valor a la vez. Idealmente, podría agregar una casilla de verificación al encabezado checkcolumn y escuchar los cambios. ¿Es eso posible?

Me gustaría señalar que no estoy buscando un modelo de casilla de verificación para seleccionar filas.

Answer 1

He creado una versión actualizada de Ext.ux.CheckColumn para esto, solo incluya este código después de incluir el código extjs:

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

entonces una configuración de ejemplo de una columna de casilla de verificación sería así:

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

Se ve como esto:

Answer 2

Creé un parche basado en el código proporcionado por @Reimius. Solo llama al método getStoreIsAllChecked cuando es necesario para mejorar el rendimiento un poco. También es compatible con Extjs 4.2 Espero que sea útil.

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

Answer 3

Usar el enfoque de bocong de arriba no me funcionó: la casilla de verificación del encabezado se mostraba sin marcar y no alternar su estado al hacer clic (también se veía un poco raro, se cortó un poco en el lado izquierdo) .

Modifiqué (y simplifiqué en gran medida) el código de bocong de arriba para que funcionara bien para ExtJS 4.2.1 (copiando el marcado necesario de la casilla de verificación de una fila normal):

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

¡Parece que funciona muy bien!

Answer 4

Debe usar la configuración si usa extjs 6.5.2 o superior.

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

La salida será así.

Un aprobado si te gusta esta sugerencia.

Answer 5

Hacer

**

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

**

Para más detalles, consulte:

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