Hybrid View

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    28
    Vote Rating
    0
    eugs51 is on a distinguished road

      0  

    Default CheckboxSelectionModel extension to automatically check/uncheck header checker

    CheckboxSelectionModel extension to automatically check/uncheck header checker


    Problem: The grid header check status does not reflect the real state of checked items in the grid. This is not a big deal but is very annoying.Solution attached solves the issue. Enjoy

    Code:
    Ext.ux.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel,{
    	constructor:function(config){
    		Ext.ux.CheckboxSelectionModel.superclass.constructor.call(this,config);
    		this.on("rowselect",this.onRowSelectUnselect,this);
    		this.on("rowdeselect",this.onRowSelectUnselect,this);
    	},
    	onRowSelectUnselect:function(){
    		//fire only the last event
    		window.clearTimeout(this.__onRowSelectUnselectTimer);		
    		this.__onRowSelectUnselectTimer = window.setTimeout(function(){
    			var el = this.grid.getView().innerHd;		
    			var sels = this.getSelections().length;
    			var total = Math.max(this.grid.store.data.length,this.grid.store.getTotalCount());
    			var hdinners = Ext.fly(el).query("div.x-grid3-hd-checker");
    			var toCheck = total===sels;
    			for(var i=0;i<hdinners.length;i++){
    				var item = hdinners[i];
    				if(Ext.fly(item).hasClass("x-grid3-hd-inner")){
    					if(toCheck){
    						Ext.fly(item).addClass('x-grid3-hd-checker-on');			                	                
    		            }else{
    		            	Ext.fly(item).removeClass('x-grid3-hd-checker-on');	
    		            }
    				}
    			}			
    		}.createDelegate(this),0);
    	}
    });

  2. #2
    Ext JS Premium Member sumit.madan's Avatar
    Join Date
    May 2009
    Location
    Bangalore, India
    Posts
    121
    Vote Rating
    24
    sumit.madan has a spectacular aura about sumit.madan has a spectacular aura about

      0  

    Default


    Thanks, I was looking to solve this issue for some time. However, the line below causes the header checkbox to be never checked when using a remote store with paging.
    Code:
    var total = Math.max(this.grid.store.data.length,this.grid.store.getTotalCount());
    I'm not sure why you need the higher number between store.data.length and store.getTotalCount(). So, I changed it to:
    Code:
    var total = this.grid.store.data.length;
    Also, converted your extension to an override, so it would apply to all the instances of CheckboxSelectionModel:
    Code:
    Ext.override(Ext.grid.CheckboxSelectionModel, {
        updateHeaderCheckboxes: function(){
            //fire only the last event
            window.clearTimeout(this.__onRowSelectUnselectTimer);
            this.__onRowSelectUnselectTimer = window.setTimeout(function(){
                var hdEl = this.grid.getView().innerHd;
                var selections = this.getSelections().length;
                var totalRecords = this.grid.store.data.length;
                var hdCheckers = Ext.fly(hdEl).query('div.x-grid3-hd-checker');
                for(var i = 0; i < hdCheckers.length; i++){
                    var item = hdCheckers[i];
                    if(Ext.fly(item).hasClass('x-grid3-hd-inner')){
                        if(totalRecords === selections){
                            Ext.fly(item).addClass('x-grid3-hd-checker-on');
                        }else{
                            Ext.fly(item).removeClass('x-grid3-hd-checker-on');
                        }
                    }
                }
            }.createDelegate(this),0);
        },
        
        initEvents: function(){
            Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
    
            this.grid.on('render', function(){
                var view = this.grid.getView();
                view.mainBody.on('mousedown', this.onMouseDown, this);
                Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);
            }, this);
            
            this.on('rowselect', this.updateHeaderCheckboxes, this);
            this.on('rowdeselect', this.updateHeaderCheckboxes, this);
    
            this.grid.mon(this.grid.store, 'load', this.updateHeaderCheckboxes, this);
            this.grid.mon(this.grid.store, 'write', this.updateHeaderCheckboxes, this);
    
        }
    });
    Last edited by sumit.madan; 30 Aug 2010 at 8:17 AM. Reason: Added store 'load' and 'write' event

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    0
    ldashevskiy is on a distinguished road

      0  

    Default Is my approach a bit simpler?

    Is my approach a bit simpler?


    Listen to 'selectrow' and 'deselectrow' events and then call the following:

    Code:
                        var view = pnlTable.getView();
                        t = Ext.fly(view.innerHd).child(".x-grid3-hd-checker");
                        isChecked = t.hasClass("x-grid3-hd-checker-on");
    
    
                        if ( pnlTable.getSelectionModel().getCount() != pnlTable.getStore().getCount() & isChecked ){
                            t.removeClass("x-grid3-hd-checker-on");
                        } else if ( pnlTable.getSelectionModel().getCount() == pnlTable.getStore().getCount() & ! isChecked ){
                            t.addClass("x-grid3-hd-checker-on");
                        }
    where pnlTable is the gridPanel instance...

Similar Threads

  1. Does CheckBoxSelectionModel fires an event when we uncheck
    By Serge Adda in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 15 Jan 2010, 10:34 AM
  2. Ext.grid.CheckboxSelectionModel check or uncheck in run time
    By saravanant in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 9 Sep 2009, 4:00 AM
  3. check / uncheck all checkboxes in checkboxgroup
    By oliverseitz in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Dec 2008, 1:50 AM
  4. CheckboxSelectionModel PagingToolbar and x-grid3-hd-checker
    By mbalusu in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 1 Apr 2008, 12:56 AM

Thread Participants: 2