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
    5,445
    Vote Rating
    113
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      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 human resources manager: fabienne.bell@sencha.com

Thread Participants: 1

Tags for this Thread