ExtJS 4 Wählen Sie mehrere CheckColumn Checkboxen mit Checkbox-Header

Question

Ich habe eine Spalte von checkcolumn Typ, um das Umschalten boolescher Werte zu aktivieren. Ich würde gerne alle Zeilen für diesen Wert auf einmal umschalten können. Im Idealfall wäre ich in der Lage, ein Kontrollkästchen an die checkcolumn Kopfzeile hinzuzufügen und auf Änderungen zu warten. Ist das möglich?

Ich möchte darauf hinweisen, dass ich nicht nach einem Checkbox-Modell suche, um Zeilen auszuwählen.

Answer 1

Ich habe eine aktualisierte Version des Ext.ux.CheckColumn dafür geschaffen, geben Sie einfach diesen Code nach dem extjs Code enthalten ist:

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

dann so ein Beispiel Aufbau einer Checkbox Spalte wäre :

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

sieht wie folgt aus:

Answer 2

ich einen Patch erstellt der Code basierend auf von @Reimius zur Verfügung gestellt. Es ruft nur getStoreIsAllChecked Methode auf, wenn nötig, um die Leistung ein wenig zu verbessern. Es unterstützt auch Extjs 4.2 Ich hoffe, es ist hilfreich.

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

Answer 3

aus dem Ansatz bocong oben nicht aus der Box für mich arbeiten: der Header-Checkbox deaktiviert wurde zeigt und wechselt nicht seinen Zustand auf klicken (es sah auch ein wenig flippig, geschnitten nur ein bisschen auf der linken Seite).

I modifiziert (und stark vereinfacht) es den Code aus bocong oben zu erhalten und 4.2.1 (Kopieren der notwendigen Markup aus einer regelmäßigen Reihe von Kontrollkästchen) für ExtJS arbeiten:

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

Es scheint zu funktionieren groß!

Answer 4

Sie sollten Einstellung verwenden, wenn Sie extjs 6.5.2 oder höher verwenden.

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

Die Ausgabe wird so sein.

Daumen hoch, wenn Sie diesen Vorschlag mögen.

Answer 5

Do

**

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

**

Für weitere Einzelheiten siehe:

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