MultiGroupingPanel on Ext 3.3 beta

[ixvivxi]

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]

I got the same issue, if I found something, I will post here. (If you found a fix, please post it ^^)

[karimchebani]

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]

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]

karimchebani, how it solves the problem?

[yyogev]

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]

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]

What version multi grouping did you use?

[yyogev]

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]

some nodes don't collapse. Have you got any example grid?

[yyogev]

This sounds like the same problem that I fixed. Did you debug it yet ?

[Radziu]

nodes has the same id's eg. "ext-gen14-gp-group3-(none)-hd"

[yyogev]

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]

Hi yyogev

some of the child nodes not collapsing or expanding

[yyogev]

Hi yyogev

some of the child nodes not collapsing or expanding


Please debug...

[bobjbain]

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]

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]

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]

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]

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]

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]

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]

i am very interested。:)
waiting for your post

[TonyBones]

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]

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]

when testing I get the following error:

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

[TonyBones]

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]

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]

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]

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]

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]

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]

TonyBones - thanks a lot! so far it works perfectly for me

[msinn]

@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]

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]

@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]

@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