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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi