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

    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
    4,081
    Vote Rating
    69
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


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


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

Thread Participants: 1

Tags for this Thread