Ext.ux.plugins.GroupHeaderGrid (v1.3)

[neshaug]

Thank you so much!!!! You are the guy I needed here! :P

The code is too static yet. The grouped headers are just trs and tds added on top of the original headers. I'll look into how they coded the "text out of headersize" thing. Though our headers do not have any size yet. A grouped header should probably get the sum size of its children.

You made the day alanqueiroz!! Do you also know why the headers don't get a right border in IE 6.0 but in all other browsers?

[alanqueiroz]

I didn't get this error on IE6 here. Can you post the source code?

I need to create a column header taking all the lines of my header. When i put rowspan = 3 (3 = number of lines of my header) the lowest column (Ext.grid.ColumnModel ([(header: "Foo ",...)) "jumps" to right. If put rowspan = 2 column the original colunm don't jump to right, but that colunm seems like it has 2 lines ... I did a "quick and dirty" hack to reach the behavior that I wanted ...

GroupHeaderPlugin.js:
renderGroupCell : function(group) {
var template = this.templates.groupCell;
var cellClass;
var rowspan;
if (group.rowspan > 0){
id=group.id;
if (group.colspan == 1) {
cellClass = "ux-grid-hd-group-spancell";
}
else {
cellClass = "ux-grid-hd-group-cell";
}
rowspan = group.rowspan;
} else if (group.rowspan == 0) {
cellClass = "ux-grid-hd-group-cell-rowspan0";
rowspan = "";
id="";
}else{
cellClass = "ux-grid-hd-group-cell";
rowspan = "";
id="";
}
return template.apply({
header: group.header,
colspan: group.colspan,
align: group.align,
rowspan: rowspan,
cellClass: cellClass
});
},



default.css:

.ux-grid-hd-group-cell-rowspan0 {
height:24px;
border-right: 1px solid rgb(208 208 208) !important;
}





Now i can do:

var cm = new Ext.grid.ColumnModel([{header:"", width: 100}]);
cm.rows = [
[
{header:"", rowspan: 0}
],[
{header:"Foo", align:"center", rowspan: 0},
]
];

Ugly, but it works...

[neshaug]

Heh, sorry for that bad algorithm.. I've rewritten the method and it should work as a normal tabel now. (like, no rowspan, or rowspawn = 0 or rowspawn = 1 is the same..).

You can replace your code with this, or you can just download the .zip file once more.

renderGroupCell : function(group) {
        var template = this.templates.groupCell;
        var cellClass;
        var rowspan;
        if (group.colspan < 2 || group.colspan === undefined){
            cellClass = "ux-grid-hd-group-nocolspan-cell";
        }
        else {
            cellClass = "ux-grid-hd-group-cell";
        }
        return template.apply({
            header: group.header,
            colspan: group.colspan,
            align: group.align,
            rowspan: group.rowspan,
            cellClass: cellClass
        });
    },

You shouldn't need your extra CSS either.

This should fix your problem, but I couldn't fully understand it. Try the new code with your grouped header code and if you still get the same result please post a picture of what grouped headers aligment you tried to do, and what the result was.

[alanqueiroz]

We are almost there ...

[neshaug]

Hmm, I really can't understand what you are trying to group.. Seems like you have 3 headers on the same group. Can you draw the layout in paint and add like english text or something similar so it would be easier to understand?

My intention with the code is to use it like I had on the first screenshot (I can't upload anything for some reason now, don't have time to figure it out). That means if you have a row with grouped headers, the only headers that get "lines" as you call it, are those who actually span (colspan) several headers (aka. groups several headers), the once who doesn't span a header ain't actually a grouped header. This is how grouped headers looks like in many of the applications I've seen, but if you are familiar with some other design for this you can alter the code the way you like.

Still, I'm interested in what layout you are trying to show and a simple paint/picture of this would be very helpfull.

I'm also going to upload some new pictures tomorrow, and a picture of the IE 6.0 CSS "bug". If I can get the upload to work again... Maybe there are some restrictions I'm unaware of.

[neshaug]

I've added a screenshot to explain the code to you. Maybe you already know it but I'll put it up anyway.

There is also a picture of the IE 6 bug. The border specified in the style do not show :\

[alanqueiroz]

To sum up, I have a 'x' column of header with 3 rows. All cells (or rows) of 'x' are "colspan: 0" and "rowspan: 0". I need bottom borders in all 'x' cells (first column at http://img221.imageshack.us/my.php?image=mycodeoj9.jpg). As you said, with the current code, bottom borders appear only if "colspan >= 2". Anyway, it's solved...

I paste your code in a html page. Running in ie6 (wine-0.9.49 + ie6) I don't get this bug. Can you try to run the attached code and post the results?

[snss]

Hi All,

I ran through the example.zip.

I cant get the correct view in IE 7, it appears that the row does not have a line on the second row.
attached is the image.
also, how can I use populate the data with different column and diff row?

[neshaug]

Check the correctness of the image path to the first CSS style, ux-grid-hd-group-cell.

First var newColumnModel = new Ext.grid.ColumnModel([new definition]);
newColumnModel.rows = [new group header definition];

Then yourGrid.reconfigure(store,newColumnModel) and do yourGrid.plugins.
renderHeaders(newColumnModel). Maybe you have to do yourGrid.getView().refresh(true) after.. If you do it the other way around, that means yourGrid.plugins.renderHeaders(newColumnModel) before the reconfigure part it should be alright without the refresh, though this is a more "ackward" way of doing it.

This should probably be implement (in the future) with correlation to the reconfigure method.

[purge]

Has anyone got this working an editable GroupedView? I get the error

 l.fireFn is undefined ext-all-debug.js Line 1504

When you click a cell to edit. I can't see any obvious reason why. As soon as i remove the plugin it works perfectly again.

Thanks

Simon.