ExtJS 4 chọn nhiều hộp kiểm CheckColumn với tiêu đề hộp kiểm

Question

Tôi có một cột loại checkcolumn để cho phép chuyển đổi giá trị boolean. Tôi muốn có thể chuyển đổi tất cả các hàng cho giá trị đó cùng một lúc. Lý tưởng nhất, tôi có thể thêm một hộp kiểm vào tiêu đề checkcolumn và lắng nghe các thay đổi. Điều đó có thể không?

Tôi muốn lưu ý rằng tôi không tìm kiếm hộp kiểm để chọn các hàng.

Answer 1

Tôi đã tạo ra một phiên bản cập nhật của Ext.ux.CheckColumn cho điều này, chỉ bao gồm mã này sau khi mã ExtJS được bao gồm:

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

sau đó thiết lập một ví dụ về một cột checkbox sẽ là như thế này :

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

Trông như thế này:

Answer 2

tôi tạo ra một bản vá dựa trên mã được cung cấp bởi @Reimius. Nó chỉ gọi phương thức getStoreIsAllChecked khi cần thiết để cải thiện hiệu suất một chút. Nó cũng hỗ trợ Extjs 4.2 Hy vọng nó hữu ích.

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

Answer 3

Sử dụng cách tiếp cận từ bocong trên không làm việc cho tôi ra khỏi hộp: hộp kiểm tiêu đề được hiển thị không được kiểm soát và không chuyển đổi trạng thái của nó trên nhấp chuột (nó cũng nhìn một chút sôi nổi, đã bị cắt chỉ là một chút ở phía bên trái).

tôi sửa đổi (và đơn giản hóa đáng kể) mã từ bocong trên để làm cho nó làm việc tốt cho ExtJS 4.2.1 (sao chép đánh dấu cần thiết từ checkbox một hàng thường xuyên của):

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

Có vẻ như để làm việc tuyệt quá!

Answer 4

Bạn nên sử dụng cài đặt nếu bạn sử dụng extjs 6.5.2 trở lên.

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

Kết quả sẽ như thế này.

Làm đẹp nếu bạn thích đề xuất này.

Answer 5

Do

**

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

**

Để cụ thể hơn tham khảo:

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