extjs - ExtJS 4は、チェックボックスヘッダーで複数のCheckColumnチェックボックスを選択します

Question

checkcolumnブール値の切り替えを有効にするタイプの列があります。その値のすべての行を一度に切り替えられるようにしたいと思います。理想的には、checkcolumnヘッダーにチェックボックスを追加して、変更をリッスンできるようにします。それは可能ですか？

行を選択するためのチェックボックスモデルを探しているわけではないことに注意してください。

Answer 1

このために、Ext.ux.CheckColumn の更新版を作成しました。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>';
    }
});

チェックボックス列の設定例は次のようになります。

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

次のようになります。

Answer 2

ExtJS 6.5.2 以降を使用している場合は、この設定を使用する必要があります。

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

出力はこのようになります。

この提案が気に入ったら、親指を立ててください。