MultiGroupingPanel on Ext 3.3 beta

[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.

MultiGroupingPanel and Summary 0.2.zip

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?