ExtJS 4 चेकबॉक्स हेडर के साथ एकाधिक चेककॉलम चेकबॉक्स का चयन करें




extjs4 extjs4.1 (4)

मैंने इसके लिए 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
        }
    }
}

इस तरह दिखता है:

मेरे पास checkcolumn कॉलम प्रकार का एक कॉलम है checkcolumn बूलीयन मूल्यों को checkcolumn रहा है मैं एक बार में उस मान के लिए सभी पंक्तियों को टॉगल करने में सक्षम होना चाहूंगा आदर्श रूप में, मैं चेक- checkcolumn हैडर में एक चेकबॉक्स जोड़ना और परिवर्तनों के लिए सुनना checkcolumn । क्या यह संभव है?

मैं यह नोट करना चाहूंगा कि मैं पंक्तियों का चयन करने के लिए एक चेकबॉक्समोडेल नहीं देख रहा हूं।


मैंने @ रेमियस द्वारा दिए गए कोड के आधार पर एक पैच बनाया है यह केवल getStoreIsAll जाँच की गई पद्धति को कॉल करता है जब प्रदर्शन को थोड़ा सुधारने के लिए आवश्यक हो। यह एक्स्टजेस 4.2 का भी समर्थन करता है। उम्मीद है कि यह उपयोगी है।

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


यदि आप 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
}

आउटपुट इस तरह से होगा

आप इस सुझाव को पसंद करते हैं तो अच्छा लगता है।