PDA

View Full Version : Grouping Feature: Expand/Collapse control & empty groups



SMMJ_Dev
17 Sep 2011, 9:20 PM
Good Morning/Afternoon/Evening Everyone,

I have created some overrides to the Grouping Feature for ExtJS4. This works with the newest version of ExtJS4 and not the first version of ExtJS4. With this file of overrides, it will allow you to specify what groups will be expanded/collapsed when you first load load the grid. Then after expanding/collapsing other groups, if you sort/move/resize columns, it will maintain your latest expanded/collapsed groups.

I have also made some updates so that you can specify empty groups so that you can display the grouped item even if there is no data for the group.

Code and Demo: ExtJS 4.0 Grouping Feature Extras

28118 (http://www.djengineer.com/ExtJSExamples/PluginExamples/Grouping/GroupingOverride.html)

SMMJ_Dev
17 Sep 2011, 10:05 PM
Also, so everyone knows, I found a little trick on how you can pin groups to the top and setup sorting on the pinned groups. Here's an example of how you can do this with the groupers setting on the store:

Replace GroupColumn with the name of the field in your model that you want to group by.
Replace GroupValue with the value of the grouped field that you want to pin. Just add more values to pin more items to the top.

You can set the pinOrder o ASC or DESC.



groupers:[{ property:"GroupColumn", direction:'ASC', pinSettings:{ pinOrder:'ASC', values:["GroupValue"] }, sorterFn:function(r1,r2){ var me=this; var v1=r1.get(me.property); var v2=r2.get(me.property); var PinV1=Ext.Array.contains(me.pinSettings.values,v1); var PinV2=Ext.Array.contains(me.pinSettings.values,v2); if(PinV1 && PinV2){ if(me.pinSettings.pinOrder=="ASC"){return v1<v2?-1:(v1>v2?1:0);} else{return v1>v2?-1:(v1<v2?1:0);} } else if(PinV1){return -1;} else if(PinV2){return 1;} else{return v1<v2?-1:(v1<v2?1:0);} } }]


I don't know anyone who wants to do this or not. I used this along with my grouping plugins above in order to group a bunch of user's data that all worked in the same department. We had the logged in user's information pinned at the top and expanded w/ all the other users' data minimized.

SMMJ_Dev
25 Sep 2011, 6:32 AM
When I get more time I will update this grouping override. There was a small issue with the last group of a store not expanding collapsing correctly and remembering it's state when sorting/moving/resizing columns.

This is the update though:


Ext.override(Ext.grid.feature.Grouping,{
modifyGroupCollapse:function(groupIdx,groupData,allGroups,feature,collapseCls){
var me=this;
var showGroup,hideGroup;
var view=feature.view,grid=view.up('gridpanel'),groupBdDomId=groupData.viewId+"-gp-"+groupData.name;
console.log(view.store.initLoad);
if(view.store.initLoad==0&&groupIdx==1){Ext.apply(view.store,{initLoad:1});}
var init=view.store.initLoad!=1;
if(feature.groupCollapseParams){
if(feature.groupCollapseParams.onlyShow){
showGroup=feature.groupCollapseParams.onlyShow(groupData.name);
if(init){feature.collapsedState[groupBdDomId]=!showGroup;}
view.store.on('load',function(){view.setHeight(grid.body.getHeight());});
}
else if(feature.groupCollapseParams.onlyHide){
showGroup=!(feature.groupCollapseParams.onlyHide(groupData.name));
if(init){feature.collapsedState[groupBdDomId]=showGroup;}
view.store.on('load',function(){view.setHeight(grid.body.getHeight());});
}
if(view.store.getGroups().length==groupIdx&&view.store.initLoad==null){
Ext.apply(view.store,{initLoad:0});
}
return init?(showGroup?"":collapseCls):"";
}
},
setGoupHeaderTpl:function(groupIdx,groupData,allGroups,feature){
var store=feature.view.store,defaultHeaderTpl=(new Ext.XTemplate(feature.groupHeaderTpl)).apply(groupData);
if(feature.showEmptyGroups){
if(groupData.rows.length==1){
if(store.getGroups()[groupIdx-1].children[0].get(feature.emptyIndicatorField)){return (new Ext.XTemplate(feature.emptyGroupHeaderTpl)).apply(groupData);}
}
}
return defaultHeaderTpl;
},
setGoupBodyTpl:function(groupIdx,groupData,allGroups,feature){
var me=this,store=feature.view.store;
if(feature.showEmptyGroups){
if(groupData.rows.length==1){
if(store.getGroups()[groupIdx-1].children[0].get(feature.emptyIndicatorField)){
return '<div class="x-grid-cell-inner x-unselectable">'+(new Ext.XTemplate(feature.emptyGroupBodyTpl)).apply(groupData)+'</div>';
}
}
}
return me.recurse(groupData);
},
getFeatureTpl:function(values,parent,x,xcount){
var me=this;
return[
'<tpl if="typeof rows !== \'undefined\'">',
'<tr class="'+Ext.baseCSSPrefix+'grid-group-hd '+(me.startCollapsed?me.hdCollapsedCls:'')+' {[this.modifyGroupCollapse(xindex,values,parent.rows,this.feature,"'+me.hdCollapsedCls+'")]} {hdCollapsedCls}"><td class="'+Ext.baseCSSPrefix+'grid-cell" colspan="'+parent.columns.length+'" {[this.indentByDepth(values)]}><div class="'+Ext.baseCSSPrefix+'grid-cell-inner"><div class="'+Ext.baseCSSPrefix+'grid-group-title">{collapsed}{[this.setGoupHeaderTpl(xindex,values,parent.rows,this.feature)]}</div></div></td></tr>',
'<tr id="{viewId}-gp-{name}" class="'+Ext.baseCSSPrefix+'grid-group-body '+(me.startCollapsed?me.collapsedCls:'')+' {[this.modifyGroupCollapse(xindex,values,parent.rows,this.feature,"'+me.collapsedCls+'")]} {collapsedCls}"><td class="'+Ext.baseCSSPrefix+'grid-cell" colspan="'+parent.columns.length+'">{[this.setGoupBodyTpl(xindex,values,parent.rows,this.feature)]}</td></tr>',
'</tpl>'
].join('');
},
getFragmentTpl:function(){
return{
feature:this,
modifyGroupCollapse:this.modifyGroupCollapse,
setGoupBodyTpl:this.setGoupBodyTpl,
setGoupHeaderTpl:this.setGoupHeaderTpl,
indentByDepth:this.indentByDepth,
depthToIndent:this.depthToIndent
};
}
});

roman.savko
8 Dec 2011, 10:10 AM
I can't get your multi grouping to get work. It groups by 1 column, but not by 2 or more

SMMJ_Dev
12 Dec 2011, 7:11 AM
Hi roman.savko,

I do not have any multi grouping implemented in this. This is just for a single group. This allows you to specify what you want to have initially expanded or collapsed and allows you to be able to show a group even if all the data is empty for that group.

jugg1es
19 Jul 2012, 11:10 AM
This doesn't appear to work in version 4.1. Any chance of an update?