PDA

View Full Version : MultiGroupingPanel on Ext 3.3 beta



ixvivxi
19 Sep 2010, 6:12 AM
I recently tested venky0589's MultiGroupingPanel control (http://www.sencha.com/forum/showthread.php?42454-Multiple-level-of-grouping-in-grids) on Ext 3.3 beta 2 and found that despite being coded for Ext 2, the control successfully performed multiple grouping on Ext 3.3 beta 2. Thing is, the grouped elements did not expand or contract; when the user attempted to operate them, an error was generated in in file ext-all-debug.js, line 5129: "s.replace is not a function". I believe that some of the standard GridView event handlers were called despite a MultiGroupingView configuration; this error can be reproduced quite easily with Ext 3.3 beta 2, a modestly-configured Apache web server, and the code from venky0589's thread on his seminal grid control. Has anyone managed to get the MultiGroupingPanel control working with Ext 3.3 beta 2?

karimchebani
8 Nov 2010, 7:35 AM
I got the same issue, if I found something, I will post here. (If you found a fix, please post it ^^)

karimchebani
8 Nov 2010, 7:47 AM
I found where the problem is :

Ext-all-debug.js in GroupView definition line 50816 :


processEvent: function(name, e){
Ext.grid.GroupingView.superclass.processEvent.call(this, name, e);
var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
if(hd){

var field = this.getGroupField(),
prefix = this.getPrefix(field),
groupValue = hd.id.substring(prefix.length),
emptyRe = new RegExp('gp-' + Ext.escapeRe(field) + '--hd'); // <--- HERE IS THE PROBLEM


groupValue = groupValue.substr(0, groupValue.length - 3);


if(groupValue || emptyRe.test(hd.id)){
this.grid.fireEvent('group' + name, this.grid, field, groupValue, e);
}
if(name == 'mousedown' && e.button == 0){
this.toggleGroup(hd.parentNode);
}
}

}

DerSalz
11 Nov 2010, 3:33 AM
I wonder if it's planed to support multiple grouping in the future of ExtJS. I would really appreciate such a feature! Does anybody know if this is planed for ExtJS?

cristinadelosa
19 Nov 2010, 3:27 PM
karimchebani, how it solves the problem?

yyogev
6 Dec 2010, 6:06 AM
I ran into this problem too.
The problem is that variable "field" is expected to be a string, while in multi-grouping view it is an array.

yyogev
30 Jan 2011, 2:41 AM
The problem in ExtJS 3.3 happens in the processEvent function of groupingView, which expects getGroupField to return a string with the name of the field. In the Multi-Grouping view the returned value is an array of field names.

I fixed this by copying the processEvent code from GroupingView.js to MultiGroupingView:


processEvent: function(name, e)
{
Ext.grid.GroupingView.superclass.processEvent.call(this, name, e);
var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
if (hd)
{
// group value is at the end of the string
var field = this.getGroupField();
// in MultiGroupingView field is an array of field names,
// so take just the last field name
if (typeof field == "object" && field.length)
field = field[field.length-1];
var prefix = this.getPrefix(field);
var groupValue = hd.id.substring(prefix.length);
var emptyRe = new RegExp('gp-' + Ext.escapeRe(field) + '--hd');
// remove trailing '-hd'
groupValue = groupValue.substr(0, groupValue.length - 3);

// also need to check for empty groups
if(groupValue || emptyRe.test(hd.id)){
this.grid.fireEvent('group' + name, this.grid, field, groupValue, e);
}
if(name == 'mousedown' && e.button == 0){
this.toggleGroup(hd.parentNode);
}
}
}

Radziu
31 Jan 2011, 4:54 AM
What version multi grouping did you use?

yyogev
31 Jan 2011, 5:09 AM
What version multi grouping did you use?

I used a modified version of the multi-grouping grid based on the version from galdaka.

The one I use has some modifications to make it work with summary and editor grid.

I attach it here so you can use. It includes the latest fix for 3.3.0.
24519

Radziu
2 Feb 2011, 5:16 AM
some nodes don't collapse. Have you got any example grid?

yyogev
2 Feb 2011, 5:19 AM
This sounds like the same problem that I fixed. Did you debug it yet ?

Radziu
2 Feb 2011, 5:22 AM
nodes has the same id's eg. "ext-gen14-gp-group3-(none)-hd"

yyogev
2 Feb 2011, 5:29 AM
Then find why they all get the same ID. It might be a problem with your grid data.
You will need to debug this yourself. I did not write this extension, and I don't claim that my modifications fit all possible cases or that the code is bug-free.

sijuthomas
11 Jul 2011, 1:43 AM
Hi yyogev

some of the child nodes not collapsing or expanding

yyogev
11 Jul 2011, 2:45 AM
Hi yyogev

some of the child nodes not collapsing or expanding


Please debug...

bobjbain
8 Aug 2011, 5:58 AM
I used a modified version of the multi-grouping grid based on the version from galdaka.

The one I use has some modifications to make it work with summary and editor grid.

I attach it here so you can use. It includes the latest fix for 3.3.0.
24519

Hi yyogev,

I am using the libraries you kindly provided in your zip file in the above post with Ext3.4 (I am using group summaries)

However I have a problem in that the header row has a blank cell inserted at the start of the row, this is throwing all the sub-totals off.

This doesn't happen if I use the base libraries from sourceforge but then I don't get any group summaries at all..

Can you help or point me in the right direction.

Thanks

27362

yyogev
9 Aug 2011, 8:44 PM
Yes, I know of this problem. I've lived with it for over 2 years, but never managed to solve it (tried for a few hours and then abandoned it). It is more complicated than it looks.

Notice also that in IE it does not happen.

psmacarov
10 Aug 2011, 8:19 PM
sijuthomas may be it is no the best solve of this problem but i do so, and it's work fine :)
look above
1. Add new variable
2. Inc variable



// init counter
var cn = 0; // ADD NEW VARIABLE
for (var i = 0, len = rs.length; i < len; i++) {
added = 0;
var rowIndex = startRow + i;
var r = rs[i];
var differ = 0;
var gvalue = [];
var fieldName;
var fieldLabel;
var grpFieldNames = [];
var grpFieldLabels = [];
var v;
var changed = 0;
var addGroup = [];
cn = cn + 1; //inccounter


Then i do this


gid = gidPrefix + '-gp'+cn+'-' + gp.dataIndex + '-' +
Ext.util.Format.htmlEncode(gp.value);

And this


getRowsFromGroup: function(r, gs, lsField){
var rx = new RegExp(".*-gp.*-"+lsField+"-.*");

fvchapa
6 Feb 2012, 3:41 AM
Please I need help. I from argentina and I need used multigrouping in a proyect. this is a error in firebug

ss is undefined




for (var hh = 0; hh < ss.items.length; hh++)




MultiGrouping.js (línea 189)


Thank You

fvchapa
6 Feb 2012, 4:19 AM
Multigrouping not collapse. this is error in firebug

d.replace is not a function



chrome://firebug/content/blank.gif

...mo",-1),h=C.getDaysInMonth()-g,e=this.cells.elements,s=this.textNodes,E=(new Dat...


ext-all.js (línea 7)

Some help? thank

Ronhead
28 Feb 2012, 6:42 AM
hi everyone!
i ve a problem with this plugin in 3.x version

firebug showme this error




chrome://firebug/content/blank.gif
Ext.fly(rows[0]).addClass(this.firstRowCls);




Html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="icon" href="../img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all-debug-w-comments.js"></script>

<title>test</title>


<script type="text/javascript" src="../js/ux/grid/MultiGroupingStore.js"></script>
<script type="text/javascript" src="../js/ux/grid/MultiGroupingView.js"></script>
<script type="text/javascript" src="../js/ux/grid/MultiGroupingPanel.js"></script>

<script>

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL="../js/ext/resources/images/default/s.gif";
Ext.form.Field.prototype.msgTarget = 'side';


var WorkOrderRecord = Ext.data.Record.create([
{name: 'local'},
{name: 'fecha'},
{name: 'vendedor'},
{name: 'trx'},
{name: 'boleta'},
{name: 'tipo_doc'},
{name: 'productos'},
{name: 'descripcion'},
{name: 'cantidad'},
{name: 'venta'}
]);


var columnModel = new Ext.grid.ColumnModel([
{header: "Local", dataIndex: 'local', sortable: true, width: 150, align:'center' },
{header: "Fecha Contable", dataIndex: 'fecha', sortable: true, width: 90, align:'center'},
{header: "Vendedor", dataIndex: 'vendedor', sortable: true, width: 200, align:'center'},
{header: "Nº TRX" , dataIndex: 'trx', sortable: true, width: 90, align:'center'},
{header: "Nº Boleta" , dataIndex: 'boleta', sortable: true, width: 90, align:'center'},
{header: "Tipo de Doc.", dataIndex: 'tipo_doc', sortable: true, width: 90, align:'center'},
{header: "Productos", dataIndex: 'productos', sortable: true, width: 90, align:'center'},
{header: "Descripción", dataIndex: 'descripcion', sortable: true, width: 200, align:'center'},
{header: "Cantidad", dataIndex: 'cantidad', sortable: true, width: 90, align:'center'},
{header: "Venta", dataIndex: 'venta', sortable: true, width: 90, align:'center'}
]);


// create reader that reads into Topic records
var reader = new Ext.data.JsonReader({
root: 'list_inf'
,id: 'local'
}, WorkOrderRecord);




var groupStore = new Ext.ux.grid.MultiGroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'SelectInformeTraeLlevaJson',
method: 'POST'
})
,reader: reader
,sortInfo: {field: 'local', direction: 'ASC'}
,groupField: ['local']
});

var groupView = new Ext.ux.grid.MultiGroupingView({
hideGroupedColumn :true
,emptyGroupText: 'All Group Fields Empty'
,displayEmptyFields: true //you can choose to show the group fields, even when they have no values
,groupTextTpl: '{text} : {group}'
,displayFieldSeperator: ', ' //you can control how the display fields are seperated
,stripeRows:false
});

var grid = new Ext.ux.grid.MultiGroupingPanel({
store: groupStore
,layout: 'fit'
,region : 'center'
,cm:columnModel
,view: groupView
,bbar: new Ext.Toolbar({
items:[{
text:"Clear All"
,scope:groupStore
,handler: function() {
console.debug("This=",this);
this.groupBy([]);
}
}]
})
});


groupStore.baseParams = {
fecha_inicio : "01/01/2011",
fecha_fin : "24/02/2012",
id_local_id : 1,
id_vendedor_id : ""
};
groupStore.load();

var viewport = new Ext.Viewport({
layout: 'border',
items: [grid]
});


});


</script>
</head>
<body>
</body>
</html>







json


{"list_inf":[{"boleta":41,"cantidad":1,"descripcion":"TRIPLE II CALZADO MUJER","fecha":{"date":26,"day":2,"hours":0,"minutes":0,"month":3,"seconds":0,"time":1303790400000,"timezoneOffset":240,"year":111},"local":"1 - HP AHUMADA 1","productos":"142383","tipo_doc":"Boleta","trx":211,"vendedor":"Vendedor No Identificado - 0103503493","venta":-14999},
{"boleta":111,"cantidad":1,"descripcion":"TRIPLE II CALZADO MUJER","fecha":{"date":28,"day":4,"hours":0,"minutes":0,"month":3,"seconds":0,"time":1303963200000,"timezoneOffset":240,"year":111},"local":"1 - HP AHUMADA 1","productos":"142389","tipo_doc":"Boleta","trx":519,"vendedor":"Vendedor No Identificado - 0103503493","venta":-19999},
{"boleta":158,"cantidad":1,"descripcion":"TRIPLE II CALZADO MUJER","fecha":{"date":3,"day":2,"hours":0,"minutes":0,"month":4,"seconds":0,"time":1304395200000,"timezoneOffset":240,"year":111},"local":"1 - HP AHUMADA 1","productos":"142389","tipo_doc":"Boleta","trx":653,"vendedor":"Vendedor No Identificado - 0103503493","venta":-19999},
{"boleta":159,"cantidad":1,"descripcion":"TRIPLE II CALZADO MUJER","fecha":{"date":3,"day":2,"hours":0,"minutes":0,"month":4,"seconds":0,"time":1304395200000,"timezoneOffset":240,"year":111},"local":"1 - HP AHUMADA 1","productos":"142383","tipo_doc":"Boleta","trx":654,"vendedor":"Vendedor No Identificado - 0103503493","venta":-15000},
{"boleta":404,"cantidad":1,"descripcion":"TRIPLE II CALZADO MUJER","fecha":{"date":14,"day":2,"hours":0,"minutes":0,"month":5,"seconds":0,"time":1308024000000,"timezoneOffset":240,"year":111},"local":"1 - HP AHUMADA 1","productos":"3200136","tipo_doc":"Boleta","trx":321,"vendedor":"Vendedor No Identificado - 0103503493","venta":-7449},
{"boleta":88,"cantidad":1,"descripcion":"CENTRACIZE CALZADO MUJER","fecha":{"date":2,"day":5,"hours":0,"minutes":0,"month":8,"seconds":0,"time":1314936000000,"timezoneOffset":240,"year":111},"local":"1 - HP AHUMADA 1","productos":"2106220203981","tipo_doc":"Nota de Cr?dito","trx":163834193,"vendedor":"SUPERVISOR ","venta":399},
{"boleta":89,"cantidad":1,"descripcion":"CENTRACIZE CALZADO MUJER","fecha":{"date":2,"day":5,"hours":0,"minutes":0,"month":8,"seconds":0,"time":1314936000000,"timezoneOffset":240,"year":111},"local":"1 - HP AHUMADA 1","productos":"2106220203981","tipo_doc":"Nota de Cr?dito","trx":164525639,"vendedor":"SUPERVISOR ","venta":399}]}

TonyBones
14 Jun 2012, 11:04 AM
So I recently came across this plugin for 2.x but needed this working in 3.4. So I've spent the last few days getting the JAFFA sources converted to 3.4.

So far so good. I have a number of changes. I fixed the Ext.fly(rows[0]) is null issue you are referring too. Just trying to get sorting to work again then I'll see about posting my source if anyone is interested.

youwant
16 Jun 2012, 1:53 AM
i am very interested。:)
waiting for your post

TonyBones
18 Jun 2012, 1:58 PM
Here is the first release of the Multi Grouping Grid / View / Store objects for ExtJS 3.4.

I pulled the original source from:
http://jaffa.sourceforge.net/JaffaRIATests/tests/extjs/multigroup/MultiGroup.html
Which is for ExtJS 2.x.

And big thanks to venky0589, yyogev and all the help from everyone in the 2.x forum for taking the first crack at this for both 2.x and 3.x.

If I find time I might start a GitHub of my branch. I don't mind maintaining it if people find bugs. Just post here and hopefully I can help. Please note this is a work in progress as of right now, I'm sure its not perfect, but it has satisfied my needs so far.

Release Notes:
- upgraded source to support ExtJS 3.4
- multi grouping grid
- support for group renderers
- support for remote sorting and grouping
- ExtJS 3.4 CSS applied
- Indention of sub-groups (View config indentGroups: bool)
- fixed overflow of group header border
- fixed processEvent overload
- disabled support for toolbar grouping display and Drag N Drop support. (hopefully I will find a way to re-integrate these features again)
- tested in Firefox and IE8

View Configs:
- indentGroups : bool true to indent groups

Store Configs:
- enableMultiGrouping: bool true to enable multi-grouping (Default: false; restrict to only 1 grouping field)


I haven't used or tested any of the *Paging* classes.

-Tony
36334

TonyBones
20 Jun 2012, 4:59 PM
a diff to fix a bug with group rows being processed twice.



Index: ext/ux/grid/MultiGroupingView.js
===================================================================
--- ext/ux/grid/MultiGroupingView.js (revision 23396)
+++ ext/ux/grid/MultiGroupingView.js (working copy)
@@ -416,9 +416,11 @@
} else {
if (!gs[i].childNodes[1]) {
if (window.console) console.error("Can't get rowcount for field ", lsField, " from ", gs, i);
- } else
- // if its an interim level, each group needs to be traversed as well
- r = this.getRowsFromGroup(r, gs[i].childNodes[1].childNodes, lsField);
+ }
+ // AMA No need for recursive call anymore because the gs array is selected via DOM query, getting all grid groups
+ // else
+ // if its an interim level, each group needs to be traversed as well
+ //r = this.getRowsFromGroup(r, gs[i].childNodes[1].childNodes, lsField);
}
}
return r;

britoyen
21 Jun 2012, 1:46 PM
when testing I get the following error:

Ext.ux.clone is not a function
this.origColModel = Ext.ux.clone(config.cm.config);

TonyBones
21 Jun 2012, 2:05 PM
Ha, thats funny. So of course I haven't used config.cm or config.colModel yet. I am using config.columns which skips this test.

You can just comment those lines out for now. The values aren't used anywhere since I commented out the toolbar stuff. It's just trying to make a clone of the Column model.

I'm not really sure where Ext.ux.clone would be defined (which add-on). This must be something that the JAFFA code is importing from elsewhere, as I don't have w/e is defining that function either. I'm going to just remove it for now since its not doing anything, you can do the same.

-Tony

This seems to be it (for 2.x)
http://www.sencha.com/forum/showthread.php?26644-Ext.ux.clone()-Object-or-Array-cloning-function

raffyaslanbeily
25 Nov 2012, 6:19 AM
Hi everyone,
Is there any chance to add a summaries plugin to this grouping stuff? the regular one doesn't work (at least, on 3.4). I am going to dig into this, but just in case - maybe the problem has already been solved by anyone?
Kindest regards,
Raffy

TonyBones
26 Nov 2012, 11:18 AM
This is actually what I've been working on ;)
I have it all working pretty solid right now, but it's not ready for release yet. I still have some things I need to clean up, like my I18N label references. And I've integrated some custom mutli-grouping buttons/settings into the bottom paging bar of the grid to manage/clear/reset mutli-groupings, this UI code is all hardcoded right now as well. I'm using the silk image library for button icons. So I'd also have to externalize those configs. All this stuff is simple to modify yourself though, it's just not ready to use "out of the box".

There are updates to all 3 MutliGrouping*.js files. Also the converted GroupSummary.js and GroupSummary.css. I'll try to clean these up a bit this week, see about getting them released.

Added support for:
- header and footer div above and below the aggregation table in the summary section that matches the column widths.
- toggling individual summary sections or all sections at once
- color coding N number of summary depths with their matching grouping header (css)
- toggle color support
- configurable indention spacing of group body sections
- restrict max number of multi-groupings via the MutliGroupingStore config

raffyaslanbeily
26 Nov 2012, 11:28 PM
Oh, wow, great news, Tony :) I have already done something for my own needs and certainly I cannot publish it because it's not generalized at all, but I am still suffering from some issues :(

raffyaslanbeily
27 Nov 2012, 4:03 AM
Yes, I know of this problem. I've lived with it for over 2 years, but never managed to solve it (tried for a few hours and then abandoned it). It is more complicated than it looks.

Notice also that in IE it does not happen.

the problem here is in html_code stuff
if you remove it, everything seems to be OK:

/*var html_code =
"div#" + gidPrefix +
" div.x-grid3-row {padding-left:" + (gfLen*12) + "px}" +
"div#" + gidPrefix + " div.x-grid3-header {padding-left:" + (gfLen*12) + "px}";*/
Ext.getDoc().child("head").createChild({
tag: 'style',
id: gidPrefix + "-style"/*,
html: html_code*/
});

it solves this particular problem at once

TonyBones
28 Nov 2012, 12:46 PM
Here it is. Usual disclaimer: Use at your own risk, I'm not liable.

For ExtJS v3.4, MultiGroupingPanel & Summary v0.2.

- Many bug fixes and minor improvements.
- Added events: beforeapply and render
- Default CSS for color coding the grouping headers and summaries are only colored up to 4 levels deep. blue, green, yellow, grey. Simply add more numbered styles to the css to add more colors. x-grid-group-hd-# and x-grid3-summary-row-# (The default max grouping is set to 3.)
- Externalized the i18n text into their own object, see config docs.
- The only thing I didn't get time to do was externalize the css classes. Currently everything is using the prefix "ss_*" for class names. Just find/replace to put in your own icons or styles. Otherwise, it shouldn't hurt anything. I just wanted to get something released quickly.

If you find bugs, questions, or comments; let me know either here or via PM.

40423

Summary Example Usage:


var summaryConfig = {
showHeader: true,


//showToggle: true,
//disableSummaryColors: true,



listeners: {

beforeapply: function (summary, data, g) {

// create new group data, save id
g.buyId = Ext.id();

// custom header, need to override headerTpl
//data.header.custom = 'data';
//data.hstyle = '';

// custom footer
data.fstyle = '';
data.footer = '<div style="text-align:right;"><div id="' + g.buyId + '" style="display:inline-block;"></div></div>';


},



render: function (summary, data, g) {


// defer all creation until after the summary nodes render
summary.createButton.defer(1, summary, [g.buyId, g,

{

text: 'Buy Now',
iconCls: 'ss_sprite ss_tick',
handler: function (button, e) {

Ext.Msg.alert('Alert', button.text);


}


}


]);


}


}

// custom functions

, createButton: function (id, group, config) {

new Ext.Button(config).render(id);


}

};

var summary = new Ext.ux.GroupSummary(summaryConfig );
gridPlugins.push(summary); // this is the array passed to GridPanel's config.plugins

* this example will render an ExtJS Button in the footer summary area right aligned.

raffyaslanbeily
29 Nov 2012, 3:02 AM
TonyBones - thanks a lot! so far it works perfectly for me

msinn
5 Dec 2012, 1:06 AM
@TonyBones
thank you a lot for your shared work! This is very helpful
I found some bugs:

1. in MultiGroupingStore.js, line 281, the method clearGrouping() calls sort() without params, so you'll have the first element of the array f 'undefined'


if (f.length < 1) {
return false;
}

should be something like this


if (Ext.isEmpty(f[0])) {
return false;
}


2. in MultiGroupingView.js, line 794, updateGroupWidths()


updateGroupWidths: function () {
if (!this.grid.store.enableMultiGrouping) Ext.ux.grid.MultiGroupingView.superclass.updateGroupWidths.call(this);

if (!this.canGroup() || !this.hasRows()) {
return;
}
var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth - this.getScrollOffset()) + 'px';
var gs = this.getGroups(); //you get the groups over Ext.DomQuery.select("div.x-grid-group", this.mainBody.dom); - line 629
var groupField = this.getGroupField();
var gfLen = groupField ? groupField.length : 0;
for (var i = 0, len = gs.length; i < len; i++) {

var g = this.getGroupById(gs[i].id); // and you add group and groupId with Ext.util.Format.htmlEncode, line 490, so it works with var g = this.getGroupById(Ext.util.Format.htmlEncode(gs[i].id));
var leaf = g.groupName == groupField[gfLen - 1]
if (leaf)
gs[i].firstChild.style.width = tw;
else
delete gs[i].firstChild.style.width;
}
}


3. MultiGroupingView.js, line 168, createQuickGroupingPanel(), there is no Array.contains(), at least not in ExtJS3


var isGrouped = groupField.contains(groupBy);

should be something like this, or you add contains to the Array prototype


var isGrouped = false;
var i = groupField.length;
while(i--){
if(groupField[i]==groupBy){
isGrouped = true; break;
}
}

TonyBones
5 Dec 2012, 5:15 PM
Cool, thanks for the updates. I'll check them out when I get a little time and get back to you.

The contains method was one of mine, sorry.


Array.prototype.contains = function(obj, testFunc) {
for (var i = 0; i < this.length; i++) {
if (testFunc) {
if (testFunc(this[i],obj)) return true;
} else {
if (this[i] === obj) return true;
}
}
return false;
};

TonyBones
10 Dec 2012, 2:16 PM
@msinn
So I understand point #1, I fixed it a slightly different way, but has the same result. Thanks for pointing this one out, as I only use/tested remote sorting/grouping/etc. I haven't done any local operations.

I don't quite understand what you are pointing out in #2 though.
The value of the column being grouped on is used in the ID of the DOM node, so I escape only this value within the overall ID.

But getGroups() and getGroupById(id) don't return the same objects. First one returns the DOM nodes of the grouped headers. The second returns the internal group Object, plain old js object, that has all the data for that group. In this function we get the group Object by using the DOM node ID. Shouldn't require any extra encoding. Is there a problem your seeing?

TonyBones
22 May 2013, 11:07 AM
@msinn
I finally ran into the #2 point above and got to see what you were talking about! Good catch! I used your fix and all is working again. Although I'm wondering if there is a better way around this without having to query the dom structure. I should be able to pull directly from the in memory list...hmmmmm

RonaldBrinkerink
3 Jun 2013, 9:36 AM
@TonyBones,

I am getting the groupfield name as a groupvalue instead of the groupfields value.
can you help me out here?

Thanks and regards,
Ronald

TonyBones
3 Jun 2013, 9:44 AM
@TonyBones,

I am getting the groupfield name as a groupvalue instead of the groupfields value.
can you help me out here?


Can you provide any code? Or any details? A screenshot?

RonaldBrinkerink
4 Jun 2013, 12:35 AM
@TonyBones

appologies. the groupTextTpl contains {text} : {group} by default
in my implementation i had overridden this with {text} ({[values.rs.length]}) in an extention of the view.

thanks for your reply and effort. I'm trying to implement this further. Looking good so far.

Regards, Ronald

TonyBones
4 Jun 2013, 9:00 AM
ah yes, you are putting the number of records in the group header text. Assuming it's working for you since your title now says [SOLVED]. I dropped in your groupTextTpl and it worked for me...although it may be a bit funny depending on what your data and grouping is actually setup to be.

In other news:
I've been working on better indention for multi-grouping, so as to give a tree-like hierarchy to a flat grid view. It's working fairly well, the only "issue" is that since the data is still flat, nested groups get cut off by the paging limits. It's not a true nested grid view, like the TreeGrid plugin or Ext 4's TreeGrid, so each inner grid doesn't ajax load as expanded. But it gives a nice visual appearance to hierarchical flat data none-the-less.

44189

RonaldBrinkerink
11 Jun 2013, 2:19 AM
@Tony

Nice work. Could you share the code for the improved indentation? Would be nice.

An issue I ran into:
When using a renderer function an error is raised in this function when grouping on that column because the renderer function is called from within the doRender of MultiGroupingView.js when creatuing the curGroup object, without specifiying all parameters



group: rndr ? rndr(grp.value) : groupOutput
,
groupName: grp.dataIndex
,
gvalue: rndr ? rndr(grp.value) : grp.value // AMA render the cell value


I replaced them with



group: rndr ? rndr(grp.value, {}, r, rowIndex, colIndex, ds) : groupOutput
,
groupName: grp.dataIndex
,
gvalue: rndr ? rndr(grp.value, {}, r, rowIndex, colIndex, ds) : grp.value // AMA render the cell value

and it seems to wok now.

Another issue I ran into is that after resizing the grid, part of it is not redrawn. No errors are thrown. The grid is an item in panel with an accordion layout, but it occurs in any layout.

44290

Have you seen this behaviour before?

Regards, Roanld

TonyBones
17 Jun 2013, 10:44 AM
@Ronald
I have not seen those resizing issues. What browser are you using? Have you tried forcing a call to grid.doLayout() to see if it fixes it? I know sometimes when I put a grid in a hidden tab its a little funny, but I just call doLayout on the tab's Change event.


Other Updates:
I'm not going to have any more time to maintain this project. I will be moving on to another endeavor. I'm in the process of putting some final touches on it and then I will re-release it one last time. I have re-integrated everyone's input from this thread already. I have been trying to clean up some documentation and a few css things. Look for it later this week.

TonyBones
19 Jun 2013, 1:17 PM
Usual disclaimer: Use at your own risk, I'm not liable.


For ExtJS v3.4, 44463

- Community feedback included
- Change default group template to only show colon if {text} exists
- groupTextTpl: '{text}<tpl if="text"> : </tpl>{group}'
- Inclusion of Array.contains(obj, testFunc) if one does not already exist
- CSS and sizing fixes
- More documentation
- New MultiGroupingView config:
- skipEmptyGroups : boolean true to stop rendering the list of group header text if one is null/empty.

This is good when grouping on a series of columns that may not all contain data.

Useful for making flat grouped data into a tree-like structure. (Default: false)



I'll try to explain my reasoning behind the new config, skipEmptyGroups. I wanted to render a flat grid structure as more of a tree-like structure by using multi-grouping to define the depth of the tree. There were two issues I had to overcome:
1) Creating a root group for each root level row, instead of having all the root level rows grouped together in one section.
2) Each branch of the "tree" could potentially be different depths, so I needed a way to only render the group header down the grouping stack to where it existed.


Example:
In this example I have a max depth of 10 so I'm grouping on columns Code0 .. Code9. In order to get each root level row in its own section you have to group on a unique value for each one, so Code0 is some id/code unique to each row. Then in order to group each root level's children under itself you have to group Code1 on the SAME EXACT CODE0 VALUE again. This may be a little counter-intuitive at first but it will become clear as we go (see included screenshot). Code2 then becomes the grouping value of the second depth of children, and so on down to Code9 which is the 9th depth level grouping value. There is no reason to group on the leaf level value, since all children get grouped by their parent's code. So to get this feature working, there is obviously some server-side requirements to be met with how you build your db query.

This now raised the question of rendering the grouping header text with variable depths. This is where the new view config parameter, skipEmptyGroups, comes into play. When true the view will only render the grouping stack down to the first empty CodeN value, then stop and pad out the rest of the header with an empty line. Only the parent level grouping column needs to have header text and by leaving off the header text of the other columns the separating colon will not be rendered either. Note, skipEmptyGroups config differs from displayEmptyFields. displayEmptyFields handles whether or not the emptyGroupText or "(none)" will be displayed if there is no grouping value.

In my use case each of these grouping columns are hidden to the user (see code below) and all other columns having grouping disable. Only the first parent level column requires a header string and since it doesn't have a parent of its own you can just return a non-breaking char for the group renderer.


{ dataIndex: 'Code0', hidden: true, hideable: false, groupable: true, header: 'Parent Projects', groupRenderer: function(){ return "&nbsp;"; } },
{ dataIndex: 'Code1', hidden: true, hideable: false, groupable: true },
{ dataIndex: 'Code2', hidden: true, hideable: false, groupable: true },
{ dataIndex: 'Code3', hidden: true, hideable: false, groupable: true },
{ dataIndex: 'Code4', hidden: true, hideable: false, groupable: true },
{ dataIndex: 'Code5', hidden: true, hideable: false, groupable: true },
{ dataIndex: 'Code6', hidden: true, hideable: false, groupable: true },
{ dataIndex: 'Code7', hidden: true, hideable: false, groupable: true },
{ dataIndex: 'Code8', hidden: true, hideable: false, groupable: true },
{ dataIndex: 'Code9', hidden: true, hideable: false, groupable: true }

44462

w3bbuilder
31 Jul 2013, 1:42 AM
Hi,

Does anyone have a working example of this extension? I don't know if my server side json is incorrect or i have a miss configuration issues of the store, view or grid.

Thank you!

Chris0_0
13 Aug 2013, 1:25 AM
Hi,
I have implemented this multigrouping grid in one of my projects. Whats your problem ?
The only problem I have currently is that I could only group on one level ...where do I define the grouping levels ?

rodo008
23 Aug 2013, 7:46 AM
Gretting, i could get a complete example implementing this..
Thanks!