ExtJS 4 zaznaczyć kilka pól wyboru CheckColumn z nagłówkiem checkbox

Question

Mam kolumnę checkcolumn typu umożliwiające przełączanie wartości logicznych. Chciałbym móc przełączać wszystkie wiersze dla tej wartości naraz. Idealnie byłoby dodać pole wyboru do nagłówka checkcolumn i posłuchać zmian. Czy to jest możliwe?

Chciałbym zauważyć, że nie szukam checkboxmodel wybrania wierszy.

Answer 1

Stworzyłem zaktualizowaną wersję Ext.ux.CheckColumn za to, po prostu to ten kod po kodzie ExtJS jest wliczone:

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

następnie przykładem konfiguracji kolumny pole wyboru będzie jak ten :

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

wygląda następująco:

Answer 2

I stworzył łatkę na podstawie kodu dostarczonego przez @Reimius. W razie potrzeby wywołuje tylko metodę getStoreIsAllChecked, aby nieco poprawić wydajność. Obsługuje także Extjs 4.2 Mam nadzieję, że to będzie pomocne.

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

Answer 3

Stosując podejście z bocong powyżej nie działa na mnie z pola: pole wyboru Nagłówek pokazywał się niekontrolowany i nie przełączyć swój stan na kliknięcie (również wyglądał trochę funky, pocięto po prostu odrobinę po lewej stronie).

I zmodyfikowane (i znacznie uproszczony) kod bocong powyżej, aby zmusić go do pracy oraz do ExtJS 4.2.1 (kopiowanie niezbędnych znaczników z wyboru regularnej Row):

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

wydaje się działać wspaniały!

Answer 4

Należy użyć ustawienia, jeśli używasz extjs 6.5.2 lub nowszego.

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

Wynik będzie taki.

Kciuki w górę, jeśli podoba ci się ta sugestia.

Answer 5

Czy

**

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

**

Więcej szczegółów patrz:

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