Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    410
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default GroupingView Events

    GroupingView Events


    I am working on a grid component and hooking up a CheckboxSelectionModel and a GroupingView. I need a checkbox displaying for each of the grouped headers which I have achieved through editing the groupTextTpl of the GroupingView.

    However, now that I have my checkboxess displaying for each of my data rows and for each of the grouped header rows, I need to prevent the checkbox selection on the grouped header row causing the collapsed groups to expand and collapse.

    I have seen in other posts that there is a 'groupclick' event which I have setup a listener on in attempt to prevent the event from propagating, but this seem to to be too late in the event chain as when I break into this event handler the grouped row has already expanded to reveal the detail rows.

    I then had a go handling the 'groupmousedown' event on the grid, which I can now break into and the group does not expand, but when I try to stop the event using the Ext methods it doesnt seem to prevent the group from expanding\collapsing.

    Code below:

    Code:
    this.on({'groupmousedown': function(grid, field, value, e){
                e.stopEvent();
            }, scope: this});
    Can anyone out there assist me here?
    Last edited by parky128; 14 Nov 2011 at 1:12 PM. Reason: spelling error

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Stopping the event won't help, the toggling happens without the view listening for that event.

    In GroupingView the processEvent checks to see if the event name is 'mousedown' and then fires the toggleGroup method on the GroupingView. In the toggleGroup method, this is where you can create an event that you can allow it to be cancelable:

    Code:
    Ext.override(Ext.grid.GroupingView, {
        toggleGroup : Ext.grid.GroupingView.prototype.toggleGroup.createInterceptor(function(group, expanded) {
            expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');
    
            return this.grid.fireEvent('beforegrouptoggle', this, group, expanded);
        })
    });
    So now you can add a listener for the 'beforegrouptoggle' and return false and it won't collapse/expand
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    410
    Vote Rating
    2
    parky128 is on a distinguished road

      1  

    Default


    Thanks for your reply, firstly I think there's a typo in the override you supplied me with. The line that contains 'gel.hasClass' doesn't look right as gel is not defined. I got it working by doing:

    Code:
    Ext.override(Ext.grid.GroupingView, {
        toggleGroup : Ext.grid.GroupingView.prototype.toggleGroup.createInterceptor(function(group, expanded) {
            expanded = Ext.isDefined(expanded) ? expanded : Ext.get(group).hasClass('x-grid-group-collapsed');
            return this.grid.fireEvent('beforegrouptoggle', this, group, expanded);
        })
    });
    In my grid code, I have a listener setup as follows:

    Code:
            this.on({'beforegrouptoggle': function(groupingview, group, expanded){
            
            //console.log('beforegrouptoggle');  
               var e = Ext.EventObject;
               var t = e.getTarget('.chkRouteGroup');
               if (t) {
                    
                    var isChecked = !t.checked;
                    
                    console.log('Checkbox checked: ' +isChecked);
                    
                    //Get the grouping field, the grouping prefix and then the grouping value.
                    var field = this.view.getGroupField();
                    var prefix = this.view.getPrefix(field);
                    var groupValue = group.id.substring(prefix.length);
    
    
                    for(var i=0; i<this.store.getCount(); i++) {
                        
                        if(this.store.getAt(i).get(field) == groupValue){
                             if(isChecked) {
                                    this.getSelectionModel().selectRow(i);
                                    console.log('select rowIdx:' + i);    
                                } else {
                                    this.getSelectionModel().deselectRow(i);
                                    console.log('deselect rowIdx:' + i);
                                }
                          }
                    }
                    return false;
               }
                  
            }, scope: this});
    I have a checkbox defined in my grouping view template like so:

    Code:
    groupTextTpl: '<input type="checkbox" class="chkRouteGroup"/><span style="font-size:13px; color:black;"> {text}&nbsp;&nbsp;&nbsp;Orders: {values.rs.length} </span>'
    What I am trying to achieve is to prevent the expand\collapse behaviour of the group if the user toggles the checked status of a checkbox in the grouping headers, so if the group is already expanded it remains as so. Also, if they check\un-check this box the rows in that group should also adhere to the selection.

    I had to resort to using a for loop on the store rather than using store.each() as I couldn't get references to my field and groupValue variables for some reason (perhaps you can help here)?

    I am now faced with an issue where if I try to select the relevant rows using the selection model selectRow() routine, it seems to cause the beforegrouptoggle event fired in the override numerous times (hundreds).

    I appreciate any help you can give me here.

  4. #4
    Sencha User
    Join Date
    Jun 2009
    Posts
    410
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


    I ended up having to stop and resume the grid events when making the selections\de-selections, so my code ended up like so:

    Code:
    		this.on({'beforegrouptoggle': function(groupingview, group, expanded){
    	
    		//console.log('beforegrouptoggle');  
    		   var e = Ext.EventObject;
    		   var t = e.getTarget('.chkRouteGroup');
    		   if (t) {
    				//Stop events on grid
    				this.suspendEvents(false);
    				
    				var isChecked = !t.checked;
    				//console.log('Checkbox checked: ' +isChecked);
    				
    				//Get the grouping field, the grouping prefix and then the grouping value.
    				var field = this.view.getGroupField();
    				var prefix = this.view.getPrefix(field);
    				var groupValue = group.id.substring(prefix.length);
    				
    				//Determine with rows to be selected\de-selected
    				var rowsToSelect = [];
    				var rowsToDeSelect = [];
    				for(var i=0; i<this.store.getCount(); i++) {
    					
    					if(this.store.getAt(i).get(field) == groupValue){
    						 if(isChecked) {
    								rowsToSelect.push(i);
    								//console.log('select rowIdx:' + i);	
    							} else {
    								rowsToDeSelect.push(i);
    								//console.log('deselect rowIdx:' + i);
    							}
    					  }
    				}
    				
    				//Perform the select\de-select
    				if(isChecked) {
    					//console.log('selectRows'); 
    					//Pass in true to maintain existing selections
    					this.getSelectionModel().selectRows(rowsToSelect,true);
    				} else {
    					//There is no deselectRows function so have to loop through here...
    					for(var i=0; i<rowsToDeSelect.length; i++) {
    						//console.log('deselectRows'); 
    						this.getSelectionModel().deselectRow(rowsToDeSelect[i]);
    					}
    				}
    				
    				//Resume events on grid
    				//console.log('resumeEvents'); 
    				this.resumeEvents();
    				return false;
    		   }
    			  
    		}, scope: this});
    Whilst this seems to work, I am left with a situation where if the group is already in a collapsed state and I click the checkbox in the grouped heading it will cause the group to expand. But thereafter, clicking the checkbox does not cause the group to toggle expand\collapse.

    I can't see why this is happening, is there a better way to achieve the desired functionality?

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    93
    Vote Rating
    3
    adammascherin is on a distinguished road

      0  

    Default


    Thanks mitchellsimoens for the solution, and thanks parky for the correction on his code.

    This helped me prevent collapsing/expanding of grouping view groups.