1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    49
    Vote Rating
    0
    thiner is on a distinguished road

      0  

    Default Ext.ux.grid.CheckColumnWithHeader

    Hi All,

    I created a new UX for grid which provides Check All features for grid. It's a simple UX based on Ext.grid.column.CheckColumn. Although it's not a big improvements for ExtJS, but I saw someone else were asking for a similar one in the forum, including me. I didn't find it, so I decided to make one by myself. Now it's done, and used in my project. I think it's good to share the UX in the forum since I gained much from it in the past days.
    Check below for the code. It's tested against ExtJs 4.2 only.
    Code:
    /**
     * An extension for grid that implemented a check column with check box on header.
     */
    Ext.define('Ext.ux.grid.CheckColumnWithHeader' ,{
        extend: 'Ext.grid.column.CheckColumn',
        alias: 'widget.checkcolumnwithheader',
        
        // private
        componentCls: Ext.baseCSSPrefix + 'column-header-checkbox ',
        checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
        injectCheckbox: true,
        views: [],
        showHeaderCheckbox: true,
        isCheckerHd: true,
        sortable: false,
        draggable: false,
        resizable: false,
        hideable: false,
        menuDisabled: true,
        style:{
            paddingLeft: '3px'
        },
        
        listeners: {
            afterrender: function(){
                var me = this,
                    grid = me.up('grid'),
                    views = me.views,
                    view = grid.getView(),
                    owner;
                
                if (Ext.Array.indexOf(views, view) === -1) {
                    views.push(view);
                }
                
                // if we have a locked header, only hook up to the first
                if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
                    if (me.showHeaderCheckbox !== false) {
                        view.headerCt.on('headerclick', me.onHeaderClick, me);
                    }
    //                me.addCheckbox(view, true);
                    owner = view.ownerCt;
                    // Listen to the outermost reconfigure event
                    if (view.headerCt.lockedCt) {
                        owner = owner.ownerCt;
                    }
                    me.mon(owner, 'reconfigure', me.onReconfigure, me);
                }
                
                me.addEvents('selectAll', 'deselectAll');
            }
        },
        
        hasLockedHeader: function(){
            var views     = this.views,
                vLen      = views.length,
                v;
    
    
            for (v = 0; v < vLen; v++) {
                if (views[v].headerCt.lockedCt) {
                    return true;
                }
            }
            return false;
        },
        
        /**
         * Handles the grid's reconfigure event.  Adds the checkbox header if the columns have been reconfigured.
         * @private
         * @param {Ext.panel.Table} grid
         * @param {Ext.data.Store} store
         * @param {Object[]} columns
         */
        onReconfigure: function(grid, store, columns) {
            if(columns) {
                this.addCheckbox(this.views[0]);
            }
        },
        
        /**
         * Toggle the ui header between checked and unchecked state.
         * @param {Boolean} isChecked
         * @private
         */
        toggleUiHeader: function(isChecked) {
            var view     = this.views[0],
                headerCt = view.headerCt,
                checkHd  = headerCt.child('gridcolumn[isCheckerHd]'),
                cls = this.checkerOnCls;
    
    
            if (checkHd) {
                if (isChecked) {
                    checkHd.addCls(cls);
                } else {
                    checkHd.removeCls(cls);
                }
            }
        },
        
        /**
         * Toggle between selecting all and deselecting all when clicking on
         * a checkbox header.
         */
        onHeaderClick: function(headerCt, header, e) {
            if (header.isCheckerHd) {
                e.stopEvent();
                var me = this,
                    isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
                    
                // Prevent focus changes on the view, since we're selecting/deselecting all records
                me.preventFocus = true;
                if (isChecked) {
                    me.deselectAll();
                    me.fireEvent('deselectAll', me, header);
                } else {
                    me.selectAll();
                    me.fireEvent('selectAll', me, header);
                }
                delete me.preventFocus;
            }
        },
        
        selectAll: function(){
            this.toggleAllCheckStatus(true);
            SSA.util.DataBus.allScenariosChecked = true;
        },
        
        deselectAll: function(){
            this.toggleAllCheckStatus(false);
            SSA.util.DataBus.allScenariosChecked = false;
        },
        
        /**
         * @private
         */
        toggleAllCheckStatus: function(status){
            var me = this,
                grid = me.up('grid'),
                view = grid.getView(),
                store = grid.getStore(),
                map = store.data.map,
                pages = Ext.Object.getKeys(map).length,
                i;
            
            for(i = 1; i <= pages; i++){
                var items = map[i]['value'];
                Ext.Array.each(items, function(item, idx, all){
                    item.data.active = status;
                });
            };
            
            me.toggleUiHeader(status);
            view.refresh();
        }
    });
    Wish you like it.
    Thank you.

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    8,501
    Vote Rating
    227
    Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of

      0  

    Default

    Looks cool. Thanks for sharing your work with the community!


    Join me at SenchaCon 2016!

Thread Participants: 1

Tags for this Thread