PDA

View Full Version : Ext.ux.plugins.GroupHeaderGrid (v1.3)



neshaug
7 Jan 2008, 2:49 AM
This plugin is based on the code from the thread below.
Old thread: http://extjs.com/forum/showthread.php?t=12677

This plugin implements support for grouping columns (see picture).

As the last update states, Condors contribution is now the main plugin and is the attached download.

Example code is contained in the downloads.

History:

07.01.08: Added support for infinite rows of grouped headers. This isn't tested much yet. Next on the list is making rowspan.

08.01.08: Added support for grouped header spanning of rows. Please read further down for more information on this.

14.01.08: Made the extension into a plugin (Thanks JorisA for the idea of making the ux a plugin!). I've tested the plugin for both GridView and GroupedView.

18.01.08: The columns got out of alignment with the headers in IE 6/7. This was fixed by alanquerioz!! :)

19.01.08: Updated the renderGroupedHeaders method.

22.02.08: Multiple updates
- vhaskilic made it possible to hide columns! :) You can download this code on attached files.
- rogerr made the plugin support the reconfigure method in the grid again.
- KRavEN got the border in no-colspan-cell's to appear by adding &nbsp to the empty header! :)

08.04.08: ApocalypseCow added a version that is using a new data structure for the grouped headers. If you used the old version of the grouped headers in your app you have to change the grouped headers definition.
- Supports toggling hide / show
- Few extras included, like changing the position of columns within its own group.
- Supports IE 6.0, IE 7.0 and FF.
Read about it and download here! (http://extjs.com/forum/showthread.php?p=149615#post149615)

12.04.08: Condor added a new version that is using the existing underlying data structure for the grouped headers. His code is also neat and tidy, and the "hackish" feel is long gone when I look at it :) This code is the new main code for this plugin, and I recommend that you continue your work on this version if you want to add new features.
Read Condors initial post about his work here (http://extjs.com/forum/showthread.php?p=151894#post151894), and about his row span work around here (http://extjs.com/forum/showthread.php?p=153709#post153709).
- Supports toggling hide / show
- Supports IE 6.0 (with a small workaround), IE 7.0 and FF.

13.11.08: GroupHeaderPlugin version 1.1 released.
- Columns contain group headers in column menu (optionally hierarchical).
- Group header events (headermousedown, headerclick, headerdblclick, headercontextmenu).
- Group header sorting and menu.
(based on GroupHeaderPlugin-widthfix)

14.11.08: GroupHeaderPlugin version 1.2 released.
- Drag & drop reorder of both columns and groups is now supported (but only within the same row!).
- Config options can now be specified in the plugin constructor as well as in the column model.

29.01.09: GroupHeaderPlugin version 1.3 released.
- Hierarchical menu now also allows showing/hiding groups.

01.08.09: The Ext 3.0.0 version of this plugin can be found here (http://www.extjs.com/forum/showthread.php?t=76322).

orangehairedboy
7 Jan 2008, 8:51 AM
I'm not enough of a genius to be able to do this myself, but could this be applied to an Editor Grid? If so, this would be IDEAL for me!

neshaug
7 Jan 2008, 10:05 AM
Yes.. Just use this view on it.. :) EditorGridPanel has a view config option just like the other GridPanels. Haven't tested it though..

neshaug
7 Jan 2008, 2:24 PM
Made support for the grouped headers to have rowspan. Some issues with it still so I won't release the code just yet.

orangehairedboy
7 Jan 2008, 3:53 PM
I honestly don't know what that means. Can you provide an example? I'm sure it's something simple and I just don't understand how it works on that level.

neshaug
7 Jan 2008, 11:33 PM
Well, if you check the config code for my GridPanel:

x = new Ext.grid.GridPanel({
cm: cmtest,
height:100,
view: new Ext.ux.GroupHeaderGridView({autoFill:true}),
autoExpandColumn:"first",
region:"north",
title:'Array Grid'
});

Here you see that I use my GroupHeaderGridView in the view config option of
the gridpanel. EditorGridPanel has this view config option as well. Just
download the GroupHeaderGridView javascript file. Include it in your include
order of javascripts and use a column model as stated in the first post and
use the ux on your view.

view: new Ext.ux.GroupHeaderGridView({autoFill:true})

neshaug
8 Jan 2008, 4:50 AM
If anyone is looking at this.. I think the correct way will be extending ColumnModel and extending GridView.. Hmm

orangehairedboy
8 Jan 2008, 8:14 AM
Ah!!! I understand now. Thanks!!!

exebenus
8 Jan 2008, 12:15 PM
Thanks for this wonderful code !

This is just what I needed.

[ ]'s

JorisA
8 Jan 2008, 5:45 PM
Looks great. Thnx for sharing.
Maybe it's an idea to make this a plugin so it can be used with groupingview etc too.

neshaug
8 Jan 2008, 11:20 PM
Good to hear all! :)

Well JorisA, I started making the ux because I couldn't do the things I wanted with GroupingView. Though making this a plugin sounds like the correct way. Then it can be used with any view! :)

Right now it seems like the ColumnModel is too weak and that the views of the grid does much of the ColumnModels work.. Well, in this ux any way.. Then again I'm new to this stuff.. :)

sfwalter
12 Jan 2008, 6:21 AM
Outstanding!!!!

neshaug
14 Jan 2008, 3:51 AM
The extension is now a plugin. This means that you can use any view you need on the grid (the extension was locked to GridView).

_Sergio_
14 Jan 2008, 7:01 AM
neshaug nice work!

Tnx for sharing!

neshaug
14 Jan 2008, 12:52 PM
Thanks a bunch Sergio and sfwalter.

alanqueiroz
16 Jan 2008, 9:58 AM
Nice job! Thanks for sharing!

But I need multi line headers to work with ColumnTree (http://yui-ext.com/forum/showthread.php?t=20793&highlight=ColumnTree)

Any ideas?
Alan

neshaug
17 Jan 2008, 3:45 AM
Hmm, that is a similar problem.. Haven't looked into it so I don't know right now. I'll try to take a look when I have time.

alanqueiroz
18 Jan 2008, 3:52 AM
I could not get it work as a plugin, adding to the Config GridPanel:

plugins: new Ext.ux.GroupHeaderGridView(forceFit (true)),

Nothing happens.

Furthermore, running as view "view: new Ext.ux.GroupHeaderGridView (forceFit (true))," the code works well in Firefox, but when I try to run in IE6, all columns header gets the same width ... :(

neshaug
18 Jan 2008, 4:38 AM
No, it will not work as a plugin/ux for the treepanel as it doesn't have any view.

You should use this a plugin by the way, not as a extension any more.

That means you should do plugins: new Ext.ux.plugins.GroupHeaderGrid()

and then choose a view, like view: new Ext.grid.GridView({forceFit:true});

I see the problem in IE 6.0, and the same problem is with IE 7.0. I will try to fix it today. :)

alanqueiroz
18 Jan 2008, 7:01 AM
It seems that "table-layout:fixed;" causes a strange problem in IE ... The following code in my css solved the "width problem"... (see ext-2.0/resources/css/grid.css)

.ext-ie .x-grid3 table,.ext-safari .x-grid3 table {
table-layout:auto;
}

But when the text length of column header exceeds the size of the column, the column width increases automatically ...

neshaug
18 Jan 2008, 7:14 AM
Thank you so much!!!! :D 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
18 Jan 2008, 10:33 AM
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
19 Jan 2008, 4:24 AM
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
21 Jan 2008, 6:11 AM
http://img158.imageshack.us/my.php?image=firstcodemc5.jpg
http://img221.imageshack.us/my.php?image=mycodeoj9.jpg
http://img158.imageshack.us/my.php?image=newcodenc3.jpg

We are almost there ... :)

neshaug
21 Jan 2008, 3:18 PM
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
21 Jan 2008, 11:43 PM
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
22 Jan 2008, 5:54 AM
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
22 Jan 2008, 9:48 AM
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
22 Jan 2008, 1:20 PM
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
23 Jan 2008, 3:50 AM
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.

neshaug
23 Jan 2008, 4:59 AM
You mean an EditorGridPanel with GroupingView? I use it with GroupingView in a normal GridPanel.

nanich
24 Jan 2008, 1:13 AM
Except the lines for dividing the grouped header and the columns under it, it's working fine. :). Thank you.
Can you please extend the functionality of this to enable the column move also.

Thanks In advance.

neshaug
24 Jan 2008, 8:35 AM
It is on the list.. for me, for you, for us all :) Hopefully I'll get time to work on this plugin again soon.

saritacg
28 Jan 2008, 2:14 AM
Hi neshaug,

I'm trying to use your plugin to show grouped headers on my EditorGrid (v1.1.1) but it is not working at all.

Is it possible to use the plugin with version 1.1.1? Could you give me a sample code to use with that version?

Thank you in advance.

mystix
28 Jan 2008, 2:36 AM
Hi neshaug,

I'm trying to use your plugin to show grouped headers on my EditorGrid (v1.1.1) but it is not working at all.

Is it possible to use the plugin with version 1.1.1? Could you give me a sample code to use with that version?

Thank you in advance.

errr.. this is the 2.0 User Extensions and Plugins forum ;)

p.s. there's no plugin architecture for Ext 1.x.

vkoduri
28 Jan 2008, 9:23 PM
Hi,
I am looking for a grouped header with column locking feature. please help me if any one has done this.

neshaug
29 Jan 2008, 12:51 PM
Is the column locking an ux? As I recall this is an ux.. If it is, did you try to use the ux with this plugin? If you did, what happened ;)

rogerr
31 Jan 2008, 8:22 PM
I am able to use the GroupHeaderPlugin extension successfully when I create the colum model and rows before the grid is rendered or loaded with data.

But, now what I want to do is build a new ColumnModel object and set this on the grid using grid.reconfigure(store, colMode). Doesn't work. Seems like maybe because the internal templates have already been created and cached.

I tried a couple quick hacks (clear this.templates.groupedHeader etc... and call initTemplates again) but didn't seem to work.

Do you have any thoughts on if/how this might be made to work?

Thanks for this ux, it is really helpful.

neshaug
1 Feb 2008, 7:38 AM
To quote my self in this thread


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.

And I did not think of this problem while I was working on this plugin because I am downloading all my models from the server just once. Also, this plugin does the work I want good enough as it is for the moment and that is why I'm slow with updates for it. I have to work on stuff I get paid for .. :P Though this reconfigure thing should be a quick fix for the plugin, so I'll do that first when I get time to work on it again.

rogerr
1 Feb 2008, 8:40 AM
looks like the combination of
grid.reconfigure(store, newColModel);
grid.plugins.renderHeaders(newColModel);
grid.getView().refresh(true);

does the trick.

Thanks a bunch.

neshaug
3 Feb 2008, 12:29 PM
No problem :) Glad it worked out!

ApocalypseCow
5 Feb 2008, 1:30 AM
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.


same error here, using a normal (non editor) gridPanel with groupingView. Disable the plugin and it works fine, enable it and any row click triggers the error.

neshaug
6 Feb 2008, 1:16 AM
Well.. I use the plugin with groupingView and I get no error.

Don't have time to look into it, but here is my config if it is any help.



myGrid = new Ext.grid.GridPanel({
title:"...",
region: "south",
margins:"0 2 2 2",
border:true,
loadMask: {msg:"Laster.."},
plugins: new Ext.ux.plugins.GroupHeaderGrid(),
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Stk." : "Stk."]})'
}),
store: new Ext.data.GroupingStore({
reader : new Ext.data.JsonReader({
root: "items"
}, new Ext.data.Record.create(...)),
url: "...",
sortInfo:{field: "Somefield", direction: "DESC"},
groupField: "Kurs",
listeners: {
"loadexception": function(proxy, data, arg, e){
Ext.Msg.alert(...);
}
}
}),
disableSelection: true,
cm: myColumnModel,
enableColumnMove: false,
enableDragDrop: false,
enableHdMenu: false
})

ApocalypseCow
6 Feb 2008, 4:05 AM
Thanks, that did help - setting disableSelection:true got rid of the fireFn error I was getting.

Hopefully I won't need the users to select any rows in a grouped header grid! :)

devnull
6 Feb 2008, 1:32 PM
Question about usage...
I initially thought this would fit the needs of my app, but after playing around with it I am now not so sure this is what it was intended for.
I want to do something like this:


-----------------
| Contact Info |
-----------------
| Name | Phone |
-----------------
| Joe User |
| (555)555-1212 |
-----------------

Where essentially I am condensing two fields down into one. Now I am already doing this using just a renderer, but of course the side effect of this is that i only have one column header and can only sort on one of the data points.
Is this possible with this plugin, or am i grasping at straws here? :)

neshaug
10 Feb 2008, 1:54 PM
You want the phone number and the username in one field, but be able to sort on the two values contained in one field?

Hmm, this plugin does nothing but render grouped headers.

devnull
11 Feb 2008, 10:53 AM
yes, thats the idea, and yes, I figured that was the answer. I just wanted to make sure.

rogerr
12 Feb 2008, 9:30 AM
I'm using the plugin, and it works great, but I ran into a problem when the grid is reconfigured such that the number of columns changes. In the current version, the plugin stores the grid's original view and column model on itself, and then uses these in the various render methods. However, when grid.reconfigure is called, new column model and views are set.

So, the changes I made were to remove the storing of this.cm and this.view, and instead wherever these were referenced set local variables from the current value of this.grid.getColumnModel() and this.grid.getView(). And that seems to do the trick.

Also, note that the renderHeaders seems never to be called with a cm arg, so I removed it and again just use this.grid.getColumnModel() in there.

The updated version of GroupHeaderPlugin.js is attached for your consideration.

Thanks for sharing your work.

KRavEN
13 Feb 2008, 7:44 AM
I fixed the IE border bug by using &nbsp; in the header instead of just an empty header:

{header:'&nbsp;',colspan:1, rowspan:1}

neshaug
13 Feb 2008, 8:15 AM
Thank you Kraven.. I'll test that later on.

And I'll take a look at what you have done rogerr :) Thank you for taking interest in this!



lso, note that the renderHeaders seems never to be called with a cm arg, so I remove...
I use this plugin with an own implementation of an AutoGrid extension. It was just to get the method to render the grouped headers after I got the response from the server (a quick workaround).

Farenji
14 Feb 2008, 6:20 AM
I still have problems with headers not aligning with the data columns in IE7. I'm using the latest version of the plugin and css, also tried a lot of other possible solutions, without success. Apparently the solution of alanquerioz is not complete or there is some other issue. Attached you find the same grid table, the first in Firefox 2 where everything is lined out correctly, the second is IE7, where stuff is messed up. Looks like it has something to do with not working ellipsis css properties in the row header, but I haven't been able to fix this. Any help is greatly appreciated!

I also have problems in IE7 when the content of a column is bigger than the width of the column, but it looks like that is not a GroupHeader specific problem but a general Ext problem, see this thread: http://yui-ext.com/forum/showthread.php?p=123755

sb32
19 Feb 2008, 9:28 PM
Looks like you have the IE7 zoom below 100%, that true?

I've noticed issues in general w/ ext when zooming out in IE7 but frankly I'mnot sure how it can be avoided. Or should be for that matter.

neshaug
21 Feb 2008, 5:13 AM
I still have problems with headers not aligning with the data columns in IE7... [/URL]

Yes, there is a problem when using the IE fix css and the content is bigger than the element. Tried to do some overflow styles without luck. My solution right now is to add the style only to the grids that use grouped headers and leave the global grid style alone.

*I am still wondering why people try to use this plugin when they are not grouping anything at all on their screenshots :P*

I am getting more and more experienced with css, so hopefully I will find a good solution soon.

vhaskilic
21 Feb 2008, 6:20 AM
Thanks for your great code, that was really what I was looking for :) One of the things I needed and missing in your GoupHeader plugin was column hide/show feature. I changed your code a little bit to enable column hide/show. Attached is the modified GroupHeaderPlugin.js to enable that feature.

Usage is exactly same but now there is no need to put enableHdMenu: false...

neshaug
22 Feb 2008, 12:59 AM
Very nice vhaskilic :)

Good that the linking method got some usage except printing! haha :)

I'm kinda frustrated about the css style still.. It is kinda strange that the css needs to be altered to get the columns aligned correctly. I've checked the html in the dom, and the headers get their own table, and they are all within a thead element. Maybe adding some css to only that header table will do the trick? Probably not since it is the columns that is the problem right now.. Though adding the ie css fix only to the column table gives the same problem as when adding it to the global style as we have done before.

Taking the grouped headers out in their own table won't help much either since we are using html rowspan and colspan to achieve the grouped headers. Maybe if we took the grouped headers out in their own table and asked for the size of the headers and count them we can make a grouped header table that just renders it self based on the headers and not renders it self dependent on the headers table element.

Hmm.. Well it is time to update the first post then.. :) Will add the solutions seperately for now and merge them when I get home from work.

neshaug
22 Feb 2008, 1:36 AM
It seems like the column table does it layout based on the index of the headers table layout. This is probably the reason for the strange rendering when using table-layout:fixed on the grouped headers grids.

ApocalypseCow
22 Feb 2008, 4:15 AM
Very nice enhancement vhaskilic, just what I needed from this plugin.

I does seem to render incorrectly if I have a header with a rowspan in it though? :-/ Works fine if everything has a rowspan of 1 but as soon as I hide a column in a grid with a rowspanned header the columns to hide are not being properly calculated.

neshaug
22 Feb 2008, 4:57 AM
Strange...

Thought it was this the code was intended to do :)

Also, I would like to get help in finding the method that renders the columns sizes the first time. It looks like this method takes all the td's in the headers and renders it, when it should only take the td's in the last row. Odd that it renders correctly in firefox and opera though... Hmm

I think it is a similiar problem as when resizing did not work. To get it to work the plugin had to interecept the method getHeaderCell in the grids view. This method used all the td's in the headers originally, but needed to use only the .x-grid3-cell td's.

vhaskilic
25 Feb 2008, 12:02 AM
neshaug's linkBandsAndHeaders function was what inspired me to add the hide/show column functionality. Without that method I would not even think it would be possible.

But it seems the function was not working correctly, in fact it does not handle the rowspans. I think that was a quick and dirty method neshaug wrote for his own testing purposes, and I am sure he never thought someone would use it to add a new feature to the plugin :)

I completely changed the function, you should use the file in this new attachment.

I haven't tested the new function throughly. But I am sure someone out there (most probably neshaug :) ) will easily write a better one :)

neshaug
25 Feb 2008, 1:14 AM
Added the new zip package to the first post vhaskilic.

Did not get any time for extjs-ing ;) this weekend.

Robson
29 Feb 2008, 2:43 AM
Yes, there is a problem when using the IE fix css and the content is bigger than the element. Tried to do some overflow styles without luck. My solution right now is to add the style only to the grids that use grouped headers and leave the global grid style alone.

*I am still wondering why people try to use this plugin when they are not grouping anything at all on their screenshots :P*

I am getting more and more experienced with css, so hopefully I will find a good solution soon.

First ... thx to all for the good work ... awesome! :)

I changed the css solution of alanquerioz to apply only to the header - not the whole grid:



.ext-ie .x-grid3-header-inner table,.ext-safari .x-grid3-header-inner table {
table-layout:auto;
}


... that worked for me

Robson

caizhikun
2 Mar 2008, 7:39 PM
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.


change the source code. "view.initTemplates.call(this)" in method initTemplates change into "Ext.grid.GroupingView.superclass.initTemplates.call(this);" will resolve.cause initTemplates() in Ext.grid.GroupingView has an eventListener

sm.on(sm.selectRow ? 'beforerowselect' : 'beforecellselect',
this.onBeforeRowSelect, this);
,but scope of the plugin have not defined.

neshaug
3 Mar 2008, 12:11 AM
First ... thx to all for the good work ... awesome! :)

I changed the css solution of alanquerioz to apply only to the header - not the whole grid:



.ext-ie .x-grid3-header-inner table,.ext-safari .x-grid3-header-inner table {
table-layout:auto;
}


... that worked for me

Robson

If you have a grouped header grid in the same panel as a regular grid the regular grid will have its content missaligned with this css for me. The data in the grouped header grid aligned correctly.

Hmm, maybe the plugin should have its own css defined for the header-inner css so that the altering of the table layout only takes effect on the grouped grid.

Air_Mike
11 Mar 2008, 11:24 PM
Hello,

this plugin is great, and just what I need, but I have one problem. How can I make it work with LokcingGridPanel extension? When I put GridPanel it works, but just when I put LockingGridPanel headers disappears.

P.S. will this plugin work with GroupView and GroupSummary plugin?

Thank You...

ApocalypseCow
12 Mar 2008, 1:18 AM
Like a few people in this thread I was having trouble with column alignment in IE7 and showing/hiding columns as well as headers not working for columns that start hidden but can then be displayed etc. So I took the step of separating the grouped headers from the cell headers and reformatting the data that gets passed through to the grouped headers.
This approach works perfectly well for my needs now and is pixel perfect across firefox and IE7 when resizing or showing/hiding columns. I'll try and pull together an example page if people would find it useful and will post my code up here.

purge
13 Mar 2008, 5:02 AM
change the source code. "view.initTemplates.call(this)" in method initTemplates change into "Ext.grid.GroupingView.superclass.initTemplates.call(this);" will resolve.cause initTemplates() in Ext.grid.GroupingView has an eventListener

sm.on(sm.selectRow ? 'beforerowselect' : 'beforecellselect',
this.onBeforeRowSelect, this);
,but scope of the plugin have not defined.

Thanks, just what I needed!

Simon.

neshaug
14 Mar 2008, 6:58 AM
Like a few people in this thread I was having trouble with column alignment in IE7 and showing/hiding columns as well as headers not working for columns that start hidden but can then be displayed etc. So I took the step of separating the grouped headers from the cell headers and reformatting the data that gets passed through to the grouped headers.
This approach works perfectly well for my needs now and is pixel perfect across firefox and IE7 when resizing or showing/hiding columns. I'll try and pull together an example page if people would find it useful and will post my code up here.

Sounds great. Finally someone that can walk the walk, I've just been talking the talk lately..

Would be verry happy to see an example.

lmalgras
7 Apr 2008, 4:32 AM
Sounds great. Finally someone that can walk the walk, I've just been talking the talk lately..

Would be verry happy to see an example.
ApocalypseCow,
I would really appreciate to see your code and example running on IE7 too.

ApocalypseCow
8 Apr 2008, 3:22 AM
Here's the code I use, just unzip this into the /examples/grid/ folder.
Live demo of this example can be found here (http://www.apocalypsecow.co.uk/ext/examples/grid/groupedHeaders/).

This works perfectly well for my data and requirements so I can imagine people may need to modify the code to make it work for them. In particular, this is only designed to handle 2 heading rows and none of my columns have ID's or widths set and none of my grids use autoFit.

Rather than pass through the rows information as before the columnModel now has a groupedHeaders property which is an array of the headings, it's subheadings and columns (remembering that this implementation only supports 2 grouped header rows)

As you'll see in the example, the structure of this array is as follows:

cm.groupedHeaders = [
{header:'', colspan: 1, rowspan: 2, columns:['company'], subHeadings:[]},
{header:'Financial', colspan: 2, rowspan: 1, columns:[], subHeadings:[
{header:'Pricing', colspan:1, rowspan: 1, columns:['price']},
{header:'Changes', colspan:1, rowspan: 1, columns:['change', 'pctChange']}
]},
{header:'Other', id: '1-5', colspan:2, rowspan: 2, columns:['lastChange','industry']}
];
From this I then extract a couple of arrays that provide a lookup so when given a column I can find out every grouped header and from any grouped header I can find out which columns it has under it.
This is used to calculate the header widths as well as in show/hide operations.

Also included are a few extras that I'm currently working on. The example allows you to drag a column within it's group but not out of it's group. Also the context menu includes grouped headers so you can show/hide a number of columns at once.

The headers have been tested in FF and IE7 & 6 but nothing else. Hopefully this will help someone.

Condor
12 Apr 2008, 2:03 AM
I created an alternate version that:

- Supports column hiding and resizing (same as the HdMenu version).
- Doesn't use element ids (so you can use the plugin in more than 1 grid at a time).
- Supports grouped header tooltips.
- Is a lot smaller.
- CSS and example file included (example only works on Ext 2.0.2, but plugin will work with Ext 2.0 and up).

I also added a second version that doesn't suffer from width issues in IE and Safari. However, this version does NOT support row spanning (but you can work around that; see included example).

ApocalypseCow
14 Apr 2008, 6:20 AM
@Condor
Is your plugin only compatible with 2.0.2 as I can't seem to get the example to work (only tried the first one so far)
First error is that this.cm.rows doesn't exist (which it doesn't it's only in the cm's config object)
So changing every occurence of cm.rows to cm.config.rows fixes that but then it throws errors later on with "simple" functions like isHidden. Am wondering if 2.0.2 is significantly different from 2.0.1 which we're running.

Condor
14 Apr 2008, 6:45 AM
Both plugins (http://extjs.com/forum/showthread.php?p=151894#post151894) work with Ext 2.0.1, but the examples only work on Ext 2.0.2.

Ext 2.0.1 doesn't allow a config object as the parameter of the columnmodel constructor, so you'll have to use the traditional way of creating a columnmodel:


var colModel = new Ext.grid.ColumnModel([
{header: 'Id', width: 25, dataIndex: 'id'},
{header: 'Nr', width: 25, dataIndex: 'nr1'},
{header: 'Text', width: 50, dataIndex: 'text1'},
{header: 'Info', width: 50, dataIndex: 'info1'},
{header: 'Special', width: 60, dataIndex: 'special1'},
{header: 'Nr', width: 25, dataIndex: 'nr2'},
{header: 'Text', width: 50, dataIndex: 'text2'},
{header: 'Info', width: 50, dataIndex: 'info2'},
{header: 'Special', width: 60, dataIndex: 'special2'},
{header: 'Special', width: 60, dataIndex: 'special3'},
{header: 'Changed', width: 50, dataIndex: 'changed'}
]);
colModel.defaultSortable = true;
colModel.rows = [
[
{},
{header: 'Before', colspan: 4, align: 'center'},
{header: 'After', colspan: 4, align: 'center'},
{colspan: 2}
], [
{},
{},
{header: 'Merchandise', colspan: 3, align: 'center'},
{},
{header: 'Merchandise', colspan: 3, align: 'center'},
{header: 'Sum', colspan: 2, align: 'center'}
]
];
new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'grid',
title: 'GroupHeaderPlugin Example',
store: new Ext.data.SimpleStore({
fields: ['id', 'nr1', 'text1', 'info1', 'special1', 'nr2', 'text2', 'info2', 'special2', 'special3', 'changed'],
data: [
['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
]
}),
colModel: colModel,
enableColumnMove: false,
viewConfig: {
forceFit: true
},
plugins: [new Ext.ux.plugins.GroupHeaderGrid()]
}]
});

chrismcnally
15 Apr 2008, 7:48 AM
I created an alternate version that:
doesn't suffer from width issues in IE and Safari. However, this version does NOT support row spanning (but you can work around that; see included example).

Your fix does seem to be working in Firefox and IE. However, I am using this in gwt-ext 2.0.1, and I am trying to get the rowspan to work by setting a colspan but no header, similar to your example html file. It's not working though, they each appear as a single TD that spans columns but not rows.

Can you explain how the rowspan workaround works? Which files are needed and where is the style ux-grid-hd-nogroup-cell defined? The javascript is working well and I can get your example to work in extJS 2.0.2, but I am missing something in my gwt-ext deployment.

thanks

Condor
16 Apr 2008, 12:52 AM
Can you explain how the rowspan workaround works? Which files are needed and where is the style ux-grid-hd-nogroup-cell defined? The javascript is working well and I can get your example to work in extJS 2.0.2, but I am missing something in my gwt-ext deployment.

Rowspan is only supported by the first plugin (GroupHeaderPlugin.zip). The second plugin (GroupHeaderPlugin-widthfix.zip) doesn't support row spanning, but you can fake it by stacking header cells and only specify a header property for the last one (this isn't rowspanning, but the visual effect is almost the same, only the text is shifted down).

ux-grid-hd-nogroup-cell is not defined, because for my purpose it needs no styling. You can add a CSS rule for the class if you want any custom styling.

CALM
16 Apr 2008, 10:27 PM
how to update groupheader's rows when metachange event is fired?

Condor
16 Apr 2008, 10:38 PM
Add a metachange eventhandler to the store that creates a new columnmodel (with rows) and calls gridPanel.reconfigure(store, newColModel).

neshaug
17 Apr 2008, 1:51 AM
It works like a charm Condor.


Ext 2.0.1 doesn't allow a config object as the parameter of the columnmodel constructor, so you'll have to use the traditional way of creating a columnmodel

Does 2.0.2 support the traditional way as well?

Thanks a bunch Condor, I just had time to convert one of my grids to ApocalypseCow's version, but now the rest of my grids supports IE 6.0 as well.

ApocalypseCow
17 Apr 2008, 2:21 AM
Nice work condor, it's certainly a lot neater than the version I posted but doesn't quite do everything I require that I'd put into my version :( ( no column dragging support, repeated column names in the show/hide menu, no show/hide by group )
so I might come up with yet another version that has everything in I need but starts from your example not the original one. The next thing I need to support is dragging grouped headers around...

neshaug
17 Apr 2008, 2:48 AM
That is true Apocalypse. Great to hear that you are using Condor's code as base.

Sampathkumar S
17 Apr 2008, 7:27 AM
Hi
see my attactment.
Header and Group are align but datarow are not align. Kindly help us to solve the issue.

html:


<html><head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="GroupSummary.js"></script>
<script type="text/javascript" src="GroupHeaderPlugin-HdMenu.js"></script>
<style type="text/css">
html, body {
font: normal 11px verdana;
}
#main-panel td {
padding:1px;
}
table {
width : 100%;
font: normal 11px verdana;
}
.ext-ie .x-grid3 table,.ext-safari .x-grid3 table {
table-layout:auto;
}
.ux-grid-hd-group-cell {
background: #f9f9f9 url(../../resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
border-right: 1px solid rgb(208 208 208) !important;
}
.ux-grid-hd-group-nocolspan-cell {
border-right: 1px solid rgb(208 208 208) !important;
}
.x-grid3-gridsummary-row-inner {
background: #f9f9f9 url(../../resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
}
.x-grid3-summary-row .x-grid3-cell-inner {
padding-bottom:4px;
background: #f9f9f9 url(../../resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
border-right: 1px solid rgb(208 208 208) !important;
}
.x-grid3-cell-first .x-grid3-cell-inner {
padding-left:16px;
}
.x-grid-hide-summary .x-grid3-summary-row {
display:none;
}
.x-grid3-summary-msg {
padding:4px 16px;
font-weight:bold;
}
</style>
<style type="text/css">
html, body {
font: normal 11px verdana;
}
#main-panel td {
padding:1px;
}
table {
width : 100%;
font: normal 11px verdana;
}
</style>
<script type="text/javascript">
var plugs = new Array();
plugs[plugs.length] = new Ext.ux.plugins.GroupHeaderGrid();
plugs[plugs.length] = new Ext.ux.grid.GridSummary();

var component_grid_store = new Ext.data.GroupingStore({
url: 'gridxml2.xml',
reader: new Ext.data.XmlReader({
record: 'c',
id: 'component_grid_Id'
}, [
{name:'Id1', type:'string'},
{name:'Id2', type:'int'},
{name:'Id3', type:'int'},
{name:'Id4', type:'int'},
{name:'Id5', type:'int'},
{name:'Id6', type:'int'},
{name:'Id7', type:'int'},
{name:'Id8', type:'int'},
{name:'Id9', type:'int'},
{name:'Id10', type:'int'},
{name:'Id11', type:'int'},
{name:'Id12', type:'int'},
{name:'Id13', type:'int'},
{name:'Id14', type:'int'},
{name:'Id15', type:'int'},
{name:'Id16', type:'int'},
{name:'Id17', type:'int'},
{name:'Id18', type:'int'},
{name:'Id19', type:'int'},
{name:'Id20', type:'int'},
{name:'Id21', type:'int'},
{name:'Id22', type:'int'},
{name:'Id23', type:'int'},
{name:'Id24', type:'int'},
{name:'Id25', type:'int'} ]),
sortInfo:{field: 'Id1', direction: "ASC"}
});
component_grid_store.load();
// creating grid Columns
var component_grid_column = new Ext.grid.ColumnModel([

{header: 'C',dataIndex: 'Id1',align: 'left',summaryType:'',sortable: true},
{header: '8-9',dataIndex: 'Id2',align: 'right',summaryType:'sum',sortable: true},
{header: '9-10',dataIndex: 'Id3',align: 'right',summaryType:'sum',sortable: true},
{header: '10-11',dataIndex: 'Id4',align: 'right',summaryType:'sum',sortable: true},
{header: '11-12',dataIndex: 'Id5',align: 'right',summaryType:'sum',sortable: true},
{header: '12-13',dataIndex: 'Id6',align: 'right',summaryType:'sum',sortable: true},
{header: '13-14',dataIndex: 'Id7',align: 'right',summaryType:'sum',sortable: true},
{header: '14-15',dataIndex: 'Id8',align: 'right',summaryType:'sum',sortable: true},
{header: '15-16',dataIndex: 'Id9',align: 'right',summaryType:'sum',sortable: true},
{header: '16-17',dataIndex: 'Id10',align: 'right',summaryType:'sum',sortable: true},
{header: '17-18',dataIndex: 'Id11',align: 'right',summaryType:'sum',sortable: true},
{header: '18-19',dataIndex: 'Id12',align: 'right',summaryType:'sum',sortable: true},
{header: '19-20',dataIndex: 'Id13',align: 'right',summaryType:'sum',sortable: true},
{header: '20-21',dataIndex: 'Id14',align: 'right',summaryType:'sum',sortable: true},
{header: '21-22',dataIndex: 'Id15',align: 'right',summaryType:'sum',sortable: true},
{header: '22-23',dataIndex: 'Id16',align: 'right',summaryType:'sum',sortable: true},
{header: '23-24',dataIndex: 'Id17',align: 'right',summaryType:'sum',sortable: true},
{header: '24-1',dataIndex: 'Id18',align: 'right',summaryType:'sum',sortable: true},
{header: '1-2',dataIndex: 'Id19',align: 'right',summaryType:'sum',sortable: true},
{header: '2-3',dataIndex: 'Id20',align: 'right',summaryType:'sum',sortable: true},
{header: '3-4',dataIndex: 'Id21',align: 'right',summaryType:'sum',sortable: true},
{header: '4-5',dataIndex: 'Id22',align: 'right',summaryType:'sum',sortable: true},
{header: '5-6',dataIndex: 'Id23',align: 'right',summaryType:'sum',sortable: true},
{header: '6-7',dataIndex: 'Id24',align: 'right',summaryType:'sum',sortable: true},
{header: '7-8',dataIndex: 'Id25',align: 'right',summaryType:'sum',sortable: true} ]);
component_grid_column.rows = [
[
{header:"",align:"center",rowspan:0},
{header:"Timings",align:"center",colspan:24}]];
//grid Creation
var component_grid_grid = new Ext.grid.GridPanel({
store: component_grid_store,
cm: component_grid_column,
plugins: plugs,
view: new Ext.grid.GroupingView({autoFill: true,forceFit:true})
});
Ext.onReady(function() {
Ext.QuickTips.init();
var cwidth = (document.body.clientWidth - 30)/ 1;
component_grid_grid.width = cwidth;
component_grid_grid.height = 200;
var panel = new Ext.Panel({
id:'main-panel',
xtype :'form',
autoScroll:true,
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:1},
defaults: {frame:true,height:.1},
items:[
{
title : 'Day Report:',
id : 'component_grid',
layout:'fit',
hideMode : 'visibility',
items: component_grid_grid ,
width : cwidth ,collapsible : true }]
})
component_grid_grid.width = .1;
document.getElementById('component_grid').parentElement.vAlign= 'top';
});
</script>
</head>
<body leftmargin='1' topmargin='1' rightmargin='1' bottommargin='1' scroll='auto'>
</body></html>

gridxml2.xml


<xml>
<c>
<Id1>&lt;a href="javascript:top.ILBOFrame.ExecuteLink('Time Analysis Report','TimeAnalysis_Act_day','component~~~CE!!!')"&gt;Construction Engineering&lt;/a&gt;</Id1>
<Id2>0</Id2>
<Id3>0</Id3>
<Id4>0</Id4>
<Id5>0</Id5>
<Id6>0</Id6>
<Id7>0</Id7>
<Id8>0</Id8>
<Id9>0</Id9>
<Id10>0</Id10>
<Id11>0</Id11>
<Id12>0</Id12>
<Id13>0</Id13>
<Id14>0</Id14>
<Id15>0</Id15>
<Id16>0</Id16>
<Id17>0</Id17>
<Id18>0</Id18>
<Id19>0</Id19>
<Id20>0</Id20>
<Id21>0</Id21>
<Id22>0</Id22>
<Id23>0</Id23>
<Id24>0</Id24>
<Id25>0</Id25>
</c>
<c>
<Id1>&lt;a href="javascript:top.ILBOFrame.ExecuteLink('Time Analysis Report','TimeAnalysis_Act_day','component~~~DE!!!')"&gt;Design Engineering&lt;/a&gt;</Id1>
<Id2>0</Id2>
<Id3>0</Id3>
<Id4>0</Id4>
<Id5>3</Id5>
<Id6>3</Id6>
<Id7>0</Id7>
<Id8>0</Id8>
<Id9>0</Id9>
<Id10>0</Id10>
<Id11>0</Id11>
<Id12>0</Id12>
<Id13>0</Id13>
<Id14>0</Id14>
<Id15>0</Id15>
<Id16>0</Id16>
<Id17>0</Id17>
<Id18>0</Id18>
<Id19>0</Id19>
<Id20>0</Id20>
<Id21>0</Id21>
<Id22>0</Id22>
<Id23>0</Id23>
<Id24>0</Id24>
<Id25>0</Id25>
</c>
<c>
<Id1>&lt;a href="javascript:top.ILBOFrame.ExecuteLink('Time Analysis Report','TimeAnalysis_Act_day','component~~~RE!!!')"&gt;Requirements Engineering&lt;/a&gt;</Id1>
<Id2>0</Id2>
<Id3>0</Id3>
<Id4>0</Id4>
<Id5>0</Id5>
<Id6>0</Id6>
<Id7>0</Id7>
<Id8>0</Id8>
<Id9>0</Id9>
<Id10>0</Id10>
<Id11>0</Id11>
<Id12>0</Id12>
<Id13>0</Id13>
<Id14>0</Id14>
<Id15>0</Id15>
<Id16>0</Id16>
<Id17>0</Id17>
<Id18>0</Id18>
<Id19>0</Id19>
<Id20>0</Id20>
<Id21>0</Id21>
<Id22>0</Id22>
<Id23>0</Id23>
<Id24>0</Id24>
<Id25>0</Id25>
</c>
</xml>

thanks in advance.

6232

Condor
17 Apr 2008, 9:34 PM
Header and Group are align but datarow are not align. Kindly help us to solve the issue.

The data will align properly if you use the GroupHeaderPlugin-widthfix plugin (don't forget to replace the groupheader CSS).
The only problem is that the last header row won't align 100% correct. I'll try to fix that in the plugin if I can find some spare time.

Sampathkumar S
21 Apr 2008, 5:05 AM
The data will align properly if you use the GroupHeaderPlugin-widthfix plugin (don't forget to replace the groupheader CSS).
The only problem is that the last header row won't align 100% correct. I'll try to fix that in the plugin if I can find some spare time.
Thanks Condor. After apply css the header and Data view are aligned but on resizing the column the dataview and header are not align. Is this plugins allow Column resizing.

Thanks in Advance.
Sampath

egobits
24 Apr 2008, 8:11 AM
Hi, i made an example of this on a grid and it worked alright. Now im trying to implement the same code on a Ext.tree.ColumnTree and the column headers wont get rendered. why?

It gives me error when trying to add this at the end of the

var tree = new Ext.tree.ColumnTree({
...
plugins: [new Ext.ux.plugins.GroupHeaderGrid()]
})

Condor
27 Apr 2008, 9:43 PM
Hi, i made an example of this on a grid and it worked alright. Now im trying to implement the same code on a Ext.tree.ColumnTree and the column headers wont get rendered. why?

Sorry, but ColumnTree has an entirely different header than a gridview, so this plugin won't work for you.
If you want grouped headers in a ColumnTree you'll have to override the onRender method of ColumnTree and also render the grouped headers.

egobits
29 Apr 2008, 8:02 AM
In that case, the quickest solution for me would be to add more detail to each column header.

Is there a way for the column header to be multiple lined? right now if i add more info to a column header it will keep itself to the same line :s

egobits
29 Apr 2008, 8:52 AM
no need to answer, i resolved this by adding a position:absolute div on the treecolumn titlebar in order to emulate the nested headers ;)

egobits
29 Apr 2008, 9:24 AM
BTW, does ColumnTree support the loading animation? (loadMask on grid).

egobits
7 May 2008, 10:41 AM
anyone? If it doesnt support it, what else could i implement to give the "loading" effect?

wm003
8 May 2008, 5:41 AM
anyone? If it doesnt support it, what else could i implement to give the "loading" effect?
Look in the docs for Ext.Element under the "mask" and "unmask" method.
ColumnTree does not support this by default (because the loading indicator is only implemented for each node), so you need to code this yourself.:-|

smcguire36
13 May 2008, 10:38 AM
Normally with a grid, when a vertical scroll bar appears, the grid is smart enough to add an additional little column header to the end of the headers the width of the scroll bar. It will appear and disappear as needed with the scrollbar.

With the GroupHeaderGrid plugin, that little extra header does not appear and when you scroll all the way to the right, the main grid becomes out of sync with the headers by the width of the vertical scrollbar.

--Stewart McGuire

smcguire36
20 May 2008, 4:34 AM
Normally with a grid, when a vertical scroll bar appears, the grid is smart enough to add an additional little column header to the end of the headers the width of the scroll bar. It will appear and disappear as needed with the scrollbar.

With the GroupHeaderGrid plugin, that little extra header does not appear and when you scroll all the way to the right, the main grid becomes out of sync with the headers by the width of the vertical scrollbar.

--Stewart McGuire
Has anyone looked into the bug with scrolling all the way to the right (and having the body become offset from the headers since the headers are missing a little extra column the width of the vertical scroll bar?

--Stewart McGuire

Condor
20 May 2008, 10:30 PM
You could use this override:


Ext.override(Ext.grid.GridView, {
layout: function(){
if(!this.mainBody){
return;
}
var g = this.grid;
var c = g.getGridEl();
var csize = c.getSize(true);
var vw = csize.width;
if(vw < 20 || csize.height < 20){
return;
}
if(g.autoHeight){
this.scroller.dom.style.overflow = 'visible';
}else{
this.el.setSize(csize.width, csize.height);
var hdHeight = this.mainHd.getHeight();
var vh = csize.height - (hdHeight);
this.scroller.setSize(vw, vh);
if(this.innerHd){
this.innerHd.style.width = (vw-this.scrollOffset)+'px';
}
}
if(this.forceFit){
if(this.lastViewWidth != vw){
this.fitColumns(false, false);
this.lastViewWidth = vw;
}
}else {
this.autoExpand();
this.syncHeaderScroll();
}
this.onLayout(vw, vh);
}
});

(copied from this post (http://www.extjs.com/forum/showthread.php?t=21265))

smcguire36
21 May 2008, 9:25 AM
I found the problem. The normal headers use the the class x-grid3-header-offset. That class sets the width to 10000px. In the GroupHeaderPlugin.css file, that class is overwridden with a width of 'auto'. I removed that override from the GroupHeaderPlugin.css file and now, the scrolling works exactly as the original headers work. In my testing I didn't see anything else was affected by my removing that override so I am not sure why it was there in the first place.

jackliu
21 May 2008, 12:13 PM
Thanks for the great work. really appreciate it.

the group column works fine with editor grid, but when I try to combine it with the Column Lock extension(http://extjs.com/forum/showthread.php?t=17942). it throws exception.

I attached a small example with this message. You can reproduce this issue by uncomment line 61 in group-header-edit-grid.js.

Can anybody help me out on this? thanks in advance!

Condor
21 May 2008, 11:36 PM
The normal headers use the the class x-grid3-header-offset. That class sets the width to 10000px. In the GroupHeaderPlugin.css file, that class is overwridden with a width of 'auto'.
...
In my testing I didn't see anything else was affected by my removing that override so I am not sure why it was there in the first place.

I replaced width:10000px with width:auto because it causes trouble in IE6 if you don't put your grid in a layout that manages the width.

mystix
28 May 2008, 7:43 PM
Add a metachange eventhandler to the store that creates a new columnmodel (with rows) and calls gridPanel.reconfigure(store, newColModel).

odd. after the reconfigure(), the columns are all squashed up until the browser window / any grid column is resized.

calling viewport.doLayout() doesn't solve this.

it's a bug in reconfigure().
http://extjs.com/forum/showthread.php?t=20138

froggman2k
1 Jul 2008, 2:29 PM
Hi all-

I have gone through this whole thread and tried all of the solutions that have been posted for getting the data to align in the columns. I have not seen the data align in the columns at all in IE6, and several of the solutions not only didn't fix the original problem, but created a new problem where the headers that were spanning multiple columns didn't line up with their columns right.

So I'm back to the download from the first page, and I'm wondering, what is the solution for having the values in IE line up correctly, given that I've tried everything everyone's posted and they haven't solved it?

This is how I'm building my grids:



var store = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record: 'item',
id: 'id',
totalRecords: 'totalrows'
},
[
{name: 'name'},
'status', 'status_code', 'spam', 'virus', 'acct', 'total', 'ytd_spam', 'ytd_virus', 'ytd_acct', 'ytd_total'
]
),
proxy: this.buildProxy(config.data),// builds remote proxy
remoteSort: true
});

var sm = new Ext.grid.CheckboxSelectionModel();

var grid = new Ext.grid.GridPanel({
style: 'margin: 0px 10px 10px 10px;',
store: store,
sm: sm,
id: 'my_grid',
loadMask: true,
bbar: new Ext.PagingToolbar({
width: Ext.isGecko && !isNaN(config.width) ? config.width + 4 : (config.width || 'auto'),
pageSize: MX.MSP.PAGE_SIZE,
store: store
}),
enableColumnMove: false,
stripeRows: true,
viewConfig: {
emptyText: 'No records to display.'
},
colModel: new Ext.grid.ColumnModel({
columns: [
sm,
{header: 'Domain', width: 110, dataIndex: 'name', sortable: true},
{header: 'Status', width: 63, dataIndex: 'status', sortable: true},
{header: 'Spam Removed', width: 67, dataIndex: 'spam', menuDisabled: true, align: 'right'},
{header: 'Viruses Removed', width: 67, dataIndex: 'virus', menuDisabled: true, align: 'right'},
{header: 'Account Messages', width: 67, dataIndex: 'acct', menuDisabled: true, align: 'right'},
{header: 'Total Messages', width: 67, dataIndex: 'total', menuDisabled: true, align: 'right'},
{header: 'Spam Removed', width: 67, dataIndex: 'ytd_spam', menuDisabled: true, align: 'right'},
{header: 'Viruses Removed', width: 67, dataIndex: 'ytd_virus', menuDisabled: true, align: 'right'},
{header: 'Account Messages', width: 67, dataIndex: 'ytd_acct', menuDisabled: true, align: 'right'},
{header: 'Total Messages', width: 67, dataIndex: 'ytd_total', menuDisabled: true, align: 'right'}
],
defaultSortable: false,
rows: [
[
{},
{},
{header: 'Last 30 Days', colspan: 4, align: 'center'},
{header: 'Year-to-Date', colspan: 4, align: 'center'}
]
]
}),
width: 714,
height: 310,
plugins: [new Ext.ux.plugins.GroupHeaderGrid()],
listeners: {
'beforeDestroy': {
fn: this.unregisterTab,
scope: this
}
}
});

store.load({params:{start:0, limit: 25}});


This grid ends up being an item in a tab panel, and does not have a view or layout associated with it. It's a stand-alone grid in a page written otherwise in regular, non-Exxt HTML. I've also attached a screenshot of what the grid ends up looking like.

Thanks for the help!

Farenji
2 Jul 2008, 5:24 AM
Here's how I solved all IE6 issues:

- Use the latest ext version
- Use the latest version of the GroupHeader plugin
- *Don't* use the GroupHeader css file
- Use a viewConfig: { forceFit: true }
- Insert an empty comment before the DOCTYPE definition:



<!-- -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This solves lots of IE6 issues but doesn't break standards compliance mode in other browsers.

It all works now.

mystix
2 Jul 2008, 7:34 AM
- Insert an empty comment before the DOCTYPE definition:


doesn't that put IE6 into quirksmode? which is the same as having no doctype declaration at all? or am i mistaken and it actually does make a difference?

froggman2k
2 Jul 2008, 9:44 AM
Hi guys-

So what I ended up doing, which seemed to work without affecting other stuff, is to take out the two declarations in the css file that weren't related to the background image on the headers. Removing those cleaned up the alignment issue in IE and had no other visible effects.

The suggestion just below my post was the one that led me to the fix for this issue, so thank you for the reply!

A note and simultaneous question: The company that I work for that is using this doesn't have the luxury of just pulling the most recent code base because of regression testing issues. Usually regression testing takes up to two weeks in our app before a release, and given that most of our UI is based in Ext now, we can't risk having to re-work our entire UI every time there's a release. So this brings up a couple questions:

1- There must be other companies using Ext this way (although, I'll be honest here, I would never have suggested or chosen to base an entire UI that is as large scale as ours on this), and I'm wondering how they handle this?
2- Most software packages like this offer support for past versions so that organizations who cannot upgrade have resources, even at a minimum documentation for past releases. Why isn't this available for Ext?

Maybe this should be posted somewhere else, but I can't tell where, and given that almost every question I've asked has gotten the "upgrade to the latest ext" response, I feel compelled to ask it.

Thanks all :)

Farenji
2 Jul 2008, 9:46 AM
doesn't that put IE6 into quirksmode? which is the same as having no doctype declaration at all? or am i mistaken and it actually does make a difference?

It makes a big difference. It puts IE6 into quirks mode but not other browsers like IE7 or Firefox, they will stay in standard compliance mode. IE6 just has too many issues with the standards compliant mode. It's such a crappy browser, I hate it. It's a shame that many people are still using it. If people just would upgrade to IE7 or switch to FF or Opera, it would make my life so much easier.

mystix
2 Jul 2008, 9:48 AM
2- Most software packages like this offer support for past versions so that organizations who cannot upgrade have resources, even at a minimum documentation for past releases. Why isn't this available for Ext?


if you're referring to archived copies of previous versions, then there's this:
http://extjs.com/learn/Ext_Version_Archives

kneeraj
10 Jul 2008, 7:38 AM
I can't download GroupHeaderPlugin.zip or GroupHeaderPlugin-widthfixed.zip. Can you please share the code here?

mystix
10 Jul 2008, 6:01 PM
I can't download GroupHeaderPlugin.zip or GroupHeaderPlugin-widthfixed.zip. Can you please share the code here?
Download using FF. IE chokes and dies with this forum's attachments.

xud78
5 Aug 2008, 1:34 AM
Thx for u code!

vizcano
26 Aug 2008, 12:23 AM
I don't know what i'm doing wrong, i'm triying to fill the grid with a json, the json i get is

[code]
{"myVisitas":[{"codigo":"XY009","nombre":"NU

Condor
26 Aug 2008, 2:55 AM
The data is there, but you can't see it, because the grid isn't large enough.
You are forgetting to set the height of the grid (or set autoHeight:true).

vizcano
28 Aug 2008, 3:51 AM
Thank you Condor, it works perfect :)

Now, i'm having another dificult, i'm trying to put a cellclick in a cell, it works fine, but when the grid is larger than the frame that is in, the first time i click the cell it change the view of the frame at shows the start of the grid like it was putting a focus on it, and then the rest of times it works perfect, you click and you get the response, there is any way to avoid it?

Thanks :)

Condor
28 Aug 2008, 7:33 AM
Now, i'm having another dificult, i'm trying to put a cellclick in a cell, it works fine, but when the grid is larger than the frame that is in, the first time i click the cell it change the view of the frame at shows the start of the grid like it was putting a focus on it, and then the rest of times it works perfect, you click and you get the response, there is any way to avoid it?

You could try to use the cellmousedown event instead, but if that doesn't work you need to modify the selection model. Which selection model (Row, Cell, Checkbox) are you using?

Twain
11 Sep 2008, 10:20 AM
Congratulations for all the contributors who make this usefull plugin.
I

vizcano
17 Sep 2008, 12:40 AM
Hi

I've got a problem with this component it works perfect but when display it doesn't align the cols, you can see what happens in the image attached, does anyone know how to solve it? Thanks :)

Condor
17 Sep 2008, 1:16 AM
That could be caused by this CSS rule:

.x-grid3-header-offset {
width: auto;
}
Could you try if removing this line fixes the problem?

Guteman
18 Sep 2008, 10:01 AM
Great work with this plugin. It has been working great for my application. I do have a little feature request though. When you have a grouped header named 'Switch' with columns 'ON', 'OFF' and another grouped header called 'Car' with columns 'ON' and 'OFF' again, it can be confusing when you are looking at the HD menu for hiding/showing columns. My current column model has ON, OFF, MID, STANDARD, TOTAL in multiple grouped headers. Do you think you can enhance the HD menu to show the grouped header name too to make it clear which column you are showing/hiding?

I have attached an image to help explain what I see.

Thanks!
Paul

vizcano
16 Oct 2008, 10:13 PM
I wonder if would be possible to merge this plugin with the autogrid extension http://extjs.com/forum/showthread.php?t=10951 and make the rows dinamically as the columns but i do not know where to begin to code. I've posted before in Autogrid thread but i did not get any answer... Does anyone know how to do it?Please help me :)

Condor
26 Oct 2008, 7:56 AM
For those of you who want to use the LockingGridView with grouped headers I adapted the code.

You can find the LockedGroupHeaderGrid plugin here (http://extjs.com/forum/showthread.php?p=243428#post243428).

mystix
26 Oct 2008, 8:33 AM
For those of you who want to use the LockingGridView with grouped headers I adapted the code.

You can find the LockedGroupHeaderGrid plugin here (http://extjs.com/forum/showthread.php?p=243428#post243428).

while you're at it, are there any plans to add support for restricting column drag+drop to the column's parent group header?

* fingers crossed ;) *

Condor
26 Oct 2008, 10:14 AM
@mystix: I'm working on it, but D&D isn't my strong point...

@Guteman: Here is a version that modifies the column menu. You have the option of a hierarchical or a flat column menu (use hierarchicalColMenu:true/false in the column model config).

Ext.namespace("Ext.ux.plugins");

Ext.ux.plugins.GroupHeaderGrid = function(config) {
Ext.apply(this, config);
};

Ext.extend(Ext.ux.plugins.GroupHeaderGrid, Ext.util.Observable, {
init: function(grid) {
var v = grid.getView();
v.beforeMethod('initTemplates', this.initTemplates);
v.renderHeaders = this.renderHeaders.createDelegate(v, [v.renderHeaders]);
v.afterMethod('onColumnWidthUpdated', this.updateGroupStyles);
v.afterMethod('onAllColumnWidthsUpdated', this.updateGroupStyles);
v.afterMethod('onColumnHiddenUpdated', this.updateGroupStyles);
v.getHeaderCell = this.getHeaderCell;
v.updateSortIcon = this.updateSortIcon;
v.getGroupStyle = this.getGroupStyle;
v.beforeColMenuShow = this.beforeColMenuShow;
},

initTemplates: function() {
var ts = this.templates || {};
if (!ts.gcell) {
ts.gcell = new Ext.Template(
'<td class="x-grid3-hd {cls} x-grid3-td-{id}" style="{style}">',
'<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">{value}</div>',
'</td>'
);
}
this.templates = ts;
},

renderHeaders: function(renderHeaders) {
var ts = this.templates, rows = [], tw = this.getTotalWidth();
for (var i = 0; i < this.cm.rows.length; i++) {
var r = this.cm.rows[i], cells = [], col = 0;
for (var j = 0; j < r.length; j++) {
var c = r[j];
c.colspan = c.colspan || 1;
c.col = col;
col += c.colspan;
var gs = this.getGroupStyle(c);
cells[j] = ts.gcell.apply({
id: c.id || i + '-' + col,
cls: c.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (c.align ? 'text-align:' + c.align + ';' : ''),
tooltip: c.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + c.tooltip + '"' : '',
value: c.header || '*',
istyle: c.align == 'right' ? 'padding-right:16px' : ''
});
}
rows[i] = ts.header.apply({
tstyle: 'width:' + tw + ';',
cells: cells.join('')
});
}
rows[rows.length] = renderHeaders.call(this);
return rows.join('');
},

getGroupStyle: function(c) {
var w = 0, h = true;
for (var i = c.col; i < c.col + c.colspan; i++) {
if (!this.cm.isHidden(i)) {
var cw = this.cm.getColumnWidth(i);
if(typeof cw == 'number'){
w += cw;
}
h = false;
}
}
return {
width: (Ext.isBorderBox ? w : Math.max(w - this.borderWidth, 0)) + 'px',
hidden: h
}
},

updateGroupStyles: function(col) {
var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth();
for (var i = 0; i < tables.length; i++) {
tables[i].style.width = tw;
if (i < this.cm.rows.length) {
var cells = tables[i].firstChild.firstChild.childNodes;
for (var j = 0; j < cells.length; j++) {
var c = this.cm.rows[i][j];
if ((typeof col != 'number') || (col >= c.col && col < c.col + c.colspan)) {
var gs = this.getGroupStyle(c);
cells[j].style.width = gs.width;
cells[j].style.display = gs.hidden ? 'none' : '';
}
}
}
}
},

getHeaderCell : function(index){
return this.mainHd.query('td.x-grid3-cell')[index];
},

updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.mainHd.select('td.x-grid3-cell').removeClass(sc);
hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
},

beforeColMenuShow : function(){
var cm = this.cm, colCount = cm.getColumnCount();
this.colMenu.removeAll();
for(var i = 0; i < colCount; i++){
var menu = this.colMenu, text = cm.getColumnHeader(i), rows = this.cm.rows;
if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
for (var row = 0; row < rows.length; row++) {
var r = rows[row], c;
for (var col = 0; col < r.length; col++) {
c = r[col];
if (i >= c.col && i < c.col + c.colspan) {
break;
}
}
if (c && c.header) {
if (this.cm.hierarchicalColMenu) {
var gid = 'group-' + row + '-' + c.col;
var item = menu.items.item(gid);
var submenu = item ? item.menu : null;
if (!submenu) {
submenu = new Ext.menu.Menu({id: gid});
submenu.on("itemclick", this.handleHdMenuClick, this);
menu.add({id: gid, text: c.header, menu: submenu});
}
menu = submenu;
} else {
text = c.header + ' ' + text;
}
}
}
menu.add(new Ext.menu.CheckItem({
id: "col-"+cm.getColumnId(i),
text: text,
checked: !cm.isHidden(i),
hideOnClick:false,
disabled: cm.config[i].hideable === false
}));
}
}
}
});

Guteman
3 Nov 2008, 3:17 PM
Thank you! I will find some time in the future to implement this into my application.

Paul

greeeg
4 Nov 2008, 3:35 AM
Hi,

I read the topic, but my "locked columns" do not work !

Here is my code :

[code]
<script type="text/javascript" src="scripts/jquery.js"></script>

<!-- Javascript : Grille -->
<link rel="stylesheet" type="text/css" href="./lib/ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="./lib/ext/resources/css/summary.css" />
<script type="text/javascript" src="./lib/ext/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="./lib/ext/ext-all.js"> </script>

<script type="text/javascript" src="./lib/ext/GroupSummary.js"> </script>
<script type="text/javascript" src="./lib/ext/searchfield.js"> </script>
<script type="text/javascript" src="./lib/ext/LockedGroupHeaderGrid.js"> </script>

<script type="text/javascript">

var ProjetsDataStore;
var ProjetListingEditorGrid;
Ext.BLANK_IMAGE_URL = './lib/ext/resources/images/default/s.gif'; // 2.0
Ext.onReady(function(){

Ext.QuickTips.init();

// Fonction appel

ncx5
4 Nov 2008, 6:26 AM
Hi,

Nevermind, got it working...


/*
* Ext JS Library 2.0.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.grid.CheckColumn = function(config) {
Ext.apply(this, config);
if (!this.id) {
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype = {
init: function(grid) {
this.grid = grid;
this.grid.on('headerclick', this.onHeaderClick, this);
this.grid.on('render', function() {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
masterValue: true,
onMouseDown: function(e, t) {

if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
onHeaderClick: function(grid, columnIndex, event) {

var newValue = this.masterValue; //(typeof column.masterValue == "undefined")?this.masterValue:!column.masterValue;

if (columnIndex != this.columnID)
return;

if (this.dataIndex != '') {
var ct = grid.getStore().getCount();
for (var i = 0; i < ct; i++) {
this.toggleCheck(grid, i, columnIndex, newValue);
}


}
this.masterValue = !this.masterValue;

},
renderer: function(v, p, record) {
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-cc-' + this.id + '">&#160;</div>';
},
toggleCheck: function(grid, rowIndex, columnIndex, newValue) {
//var td = grid.getView().getCell(rowIndex, columnIndex);
var record = grid.getStore().getAt(rowIndex);
var startValue = record.data[this.dataIndex];
if (this.dataIndex != '') {
record.set(this.dataIndex, newValue);
}
}
};
Ext.onReady(function() {

Ext.QuickTips.init();

var xg = Ext.grid;
// custom column plugin example
var pt1Col = [
new Ext.grid.CheckColumn({ header: "P1", dataIndex: 'P1', fixed:true, width: 40, columnID: 8 }),
new Ext.grid.CheckColumn({ header: "P2", dataIndex: 'P2', fixed: true, width: 40, columnID: 9 }),
new Ext.grid.CheckColumn({ header: "P3", dataIndex: 'P3', fixed: true, width: 40, columnID: 10 })
];

var pt2Col = [
new Ext.grid.CheckColumn({ header: "P4", dataIndex: 'P4', fixed: true, width: 40, columnID: 11 }),
new Ext.grid.CheckColumn({ header: "P5", dataIndex: 'P5', fixed: true, width: 40, columnID: 12 }),
new Ext.grid.CheckColumn({ header: "P6", dataIndex: 'P6', fixed: true, width: 40, columnID: 13 })
];

var pt3Col = [
new Ext.grid.CheckColumn({ header: "P7", dataIndex: 'P7', fixed: true, width: 40, columnID: 14 }),
new Ext.grid.CheckColumn({ header: "P8", dataIndex: 'P8', fixed: true, width: 40, columnID: 15 }),
new Ext.grid.CheckColumn({ header: "P9", dataIndex: 'P9', fixed: true, width: 40, columnID: 16 }),
new Ext.grid.CheckColumn({ header: "P10", dataIndex: 'P10', fixed: true, width: 40, columnID: 17 })
];

// custom column plugin example
var stCol = [
new Ext.grid.CheckColumn({ header: "S1", dataIndex: 'S1', fixed: true, width: 40, columnID: 3 }),
new Ext.grid.CheckColumn({ header: "S2", dataIndex: 'S2', fixed: true, width: 40, columnID: 4 }),
new Ext.grid.CheckColumn({ header: "S3", dataIndex: 'S3', fixed: true, width: 40, columnID: 5 }),
new Ext.grid.CheckColumn({ header: "S4", dataIndex: 'S4', fixed: true, width: 40, columnID: 6 }),
new Ext.grid.CheckColumn({ header: "S5", dataIndex: 'S5', fixed: true, width: 40, columnID: 7 })
];
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name: 'form' },
{ name: 'S1', type: 'boolean' }, { name: 'S2', type: 'boolean' }, { name: 'S3', type: 'boolean' }, { name: 'S4', type: 'boolean' },
{ name: 'P1', type: 'boolean' }, { name: 'P2', type: 'boolean' }, { name: 'P3', type: 'boolean' }, { name: 'P4', type: 'boolean' },
{ name: 'P5', type: 'boolean' }, { name: 'P6', type: 'boolean' }, { name: 'P7', type: 'boolean' }, { name: 'P8', type: 'boolean' },
{ name: 'P9', type: 'boolean' }, { name: 'P10', type: 'boolean' }, { name: 'P11', type: 'boolean' }, { name: 'P12', type: 'boolean' },
{ name: 'desc' }
]);


var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{ header: "ID", width: 50, sortable: true, fixed: true, dataIndex: 'id', editor: new Ext.form.TextField({
allowBlank: false,disabled:true,hidden:true
})
},
{ header: "Document", width: 200, sortable: true, fixed: true, dataIndex: 'form', editor: new Ext.form.TextField({
allowBlank: false
})
}
].concat(stCol).concat(pt1Col).concat(pt2Col).concat(pt3Col));


cm.groupedHeaders = [
{ header: '', width:270,colspan: 1, rowspan: 2, columns: ['ID','Document' ], subHeadings: [] },
{ header: 'Service', width: (stCol.length * stCol[0].width) - 2, colspan: 2, rowspan: 2, columns: [].concat(stCol) },
{ header: 'Product', width: (10 * 40) - 2, colspan: 2, rowspan: 1, columns: [], subHeadings: [
{ header: 'Term', width: (pt1Col.length * pt1Col[0].width) - 2, colspan: 1, rowspan: 1, columns: [].concat(pt1Col) },
{ header: 'Universal', width: (pt2Col.length * pt2Col[0].width) - 2, colspan: 1, rowspan: 1, columns: [].concat(pt2Col) },
{ header: 'Variable', width: (pt3Col.length * pt3Col[0].width) - 2, colspan: 1, rowspan: 1, columns: [].concat(pt3Col) }
]
}
//{ header: 'Other', id: '1-5', colspan: 2, rowspan: 2, columns: ['lastChange', 'industry'] }
];
//var sm = new Ext.grid.CheckboxSelectionModel();
var sm = new Ext.grid.RowSelectionModel({ singleSelect: false });
var grid = new xg.EditorGridPanel({
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo: { field: 'form', direction: "ASC"}//,
// groupField:'industry'
}),
selModel: sm,
disableSelection: false, // workaround for bug with grouped headers and fireFn
enableHdMenu: false,
enableColumnMove: false, // until moving within grouped headings is written

plugins: [new Ext.ux.plugins.GroupHeaderGrid()].concat(stCol).concat(pt1Col).concat(pt2Col).concat(pt3Col),

colModel: cm,

view: new Ext.grid.GroupingView({
//forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
clicksToEdit: 2,

tbar: [{
text: 'Save',
tooltip: 'Click to save the record',
iconCls: 'save',
handler: function() {
}
},
{
text: 'Delete',
tooltip: 'Click to delete the selected record',
iconCls: 'remove',
handler: function() {
// grid.stopEditing();
// store.insert(0, p);
// grid.startEditing(0, 0);
}
}, {
text: 'Cancel',
iconCls: 'refresh',
tooltip: 'Click to cancel the edit',
handler: function() {

}
}],
frame: false,
//width: 700,
height: 450,
//autoWidth: true,
// autoHeight: true,
collapsible: true,
animCollapse: true,
title: 'Document Association',
renderTo: 'editor-grid'
});
});



// Array data for the grids
Ext.grid.dummyData = [
[123,'UL-1001', true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false],
[411,'ULD-1112', true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false],
[333,'ULDX-1212', true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false]

];

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
}

Nc

teddyjas
13 Nov 2008, 12:14 AM
Hi,
I am using this plugin currently for my grid.

So how do I enable the sorting on this header?

let me show you how:

=================================
= header1 = header2 =
=================================
= subheader1 = subheader2 = subheader3 =
=================================

thats how the header will look like.
Currently the sorting can only done on the subheader (2nd row),
mouseover will show the header highlighted then click to sort.

so how do I enable this kind of behaviour for the first header?
anyone has done this before? if not then I had to do this :((:((:((

Condor
13 Nov 2008, 12:28 AM
Currently the sorting can only done on the subheader (2nd row),
mouseover will show the header highlighted then click to sort.

so how do I enable this kind of behaviour for the first header?
anyone has done this before? if not then I had to do this :((:((:((

And how would it sort when you click on a group header? Ext JS currently only sorts on a single field, not multiple.

teddyjas
13 Nov 2008, 1:04 AM
And how would it sort when you click on a group header? Ext JS currently only sorts on a single field, not multiple.



ughhhh does it means no one doing it yettt? :(

was thinking in the rows configuration samething, you will need to user sortable: true and also dataIndex: fieldname

the dataIndex is the one will be use for sorting... nothing more fanciful just sort on the dataIndex specified......

arghh if no one haven't do this.. then I'll do since I need it :(....8-|... arghh come condor lets go for ~o) :D

Condor
13 Nov 2008, 4:25 AM
arghh come condor lets go for ~o) :D

You asked for it and here it is ;)

GroupHeaderPlugin version 1.1:
- Based on GroupHeaderPlugin-widthfix.
- Columns contain group headers in column menu (optionally hierarchical).
- Group header events (headermousedown, headerclick, headerdblclick, headercontextmenu).
- Group header sorting and menu.

The only thing missing now is properly handling enableColumnMove:true.

teddyjas
13 Nov 2008, 6:33 PM
thanksss condorr!!

just exactly what I want... see surely someone done it before... no need to re-invent the wheel :)

thanks a lot.

Condor
14 Nov 2008, 3:56 AM
OK, I finally got around to fixing column reorder :D.

GroupHeaderPlugin version 1.2:
- Drag & drop reorder of both columns and groups is now supported (but only within the same row!).
- Config options can now be specified in the plugin constructor as well as in the column model.
(based on GroupHeaderPlugin-1.1)

mystix
14 Nov 2008, 7:44 AM
OK, I finally got around to fixing column reorder :D.

GroupHeaderPlugin version 1.2:
- Drag & drop reorder of both columns and groups is now supported (but only within the same row!).
- Config options can now be specified in the plugin constructor as well as in the column model.
(based on GroupHeaderPlugin-1.1)

this one's on me ~o)

galdaka
14 Nov 2008, 2:11 PM
OK, I finally got around to fixing column reorder :D.

GroupHeaderPlugin version 1.2:
- Drag & drop reorder of both columns and groups is now supported (but only within the same row!).
- Config options can now be specified in the plugin constructor as well as in the column model.
(based on GroupHeaderPlugin-1.1)

Awesome!!

Live example: http://www.jadacosta.es/extjs/examples/GroupHeaderPlugin/GroupHeaderPlugin.html

P.D: Where is horizontal line separator between header lines?

Thanks in advance,

Condor
16 Nov 2008, 12:00 AM
Where is horizontal line separator between header lines?

GroupHeaderPlugin.css should reference the correct grid3-hrow.gif (you put the example in a different relative location to the Ext JS resources than I did).

galdaka
16 Nov 2008, 3:54 AM
GroupHeaderPlugin.css should reference the correct grid3-hrow.gif (you put the example in a different relative location to the Ext JS resources than I did).

Solved. Thanks.

mystix
17 Nov 2008, 1:32 AM
@condor, here's an interesting problem for you...

trying to combine (a slightly modified version of) @mindpattern's GridViewMenuPlugin with your GroupHeaderGrid plugin works flawlessly if hierarchicalColMenu = false, but throws an error when clicking on the GridViewMenuPlugin's submenu items if hierarchicalColMenu = true.

the failure occurs on the following line of Ext.menu.Menu's onClick() method:


onClick : function(e){
var t;
if(t = this.findTargetItem(e)){
if(t.menu && this.ignoreParentClicks){
t.expandMenu();
}else{
t.onClick(e);
this.fireEvent("click", this, t, e);
}
}
}

with Firebug throwing the following error:


l.fireFn is undefined
clearListeners()()ext-all-debug.js (line 152)
addListener()()ext-all-debug.js (line 132)
deactivate()(Object browserEvent=Event resize button=-1 type=resize)ext-all-debug.js (line 1772)
tryActivate()(Object browserEvent=Event resize button=-1 type=resize)ext-all-debug.js (line 1734)
h()()ext-all.js (line 177)
wrappedFn()()

i've got a feeling one of the plugins is incorrectly calling something in someone else's scope, but i can't figure out which.
i've scanned through the code from both plugins and can't find any suspect code. any ideas?

p.s. i've attached a complete drop-in example (with the paths corrected so the whole thing drops directly into <ext root>/examples). any ideas much appreciated.

Condor
17 Nov 2008, 2:13 AM
You are right, GridViewMenuPlugin has some scope errors.

IMHO the event handlers should be changed to:


Ext.override(Ext.ux.grid.GridViewMenuPlugin, {
_handleHdMenuClick : function() {
return this._view.handleHdMenuClick.apply(this._view, arguments);
},
_beforeColMenuShow : function() {
var _colMenu = this._view.colMenu;
this._view.colMenu = this.colMenu;
this._view.beforeColMenuShow.apply(this._view, arguments);
this._view.colMenu = _colMenu;
this.colMenu.insert(0, new Ext.menu.Separator());
this.colMenu.insert(0, new Ext.menu.TextItem({
text: String.format(
'<img src="{0}" class="x-menu-item-icon x-cols-icon" />{1}',
Ext.BLANK_IMAGE_URL,
this._view.columnsText
),
style: 'line-height:16px;padding:3px 21px 3px 3px;'
}));
}
});

mystix
17 Nov 2008, 6:06 PM
works a treat. =D>

now i'm starting to wonder if there's an easy way out of plugin chaos...

mystix
17 Nov 2008, 6:50 PM
found one tiny display issue while testing your plugin in Safari 3.2 (Win):

http://img232.imageshack.us/img232/3790/200811181046rw0.png

there's a minor misalignment of group headers.

teddyjas
17 Nov 2008, 7:46 PM
what about if I want the sort icon to display on the clicked cell instead of the cell column it is sorted?

like in mystix sample above, I want the sort icon (desc/asc) to be shown in 'Before' and 'After' depending the user click on which cell?

Condor
17 Nov 2008, 11:14 PM
found one tiny display issue while testing your plugin in Safari 3.2 (Win):
there's a minor misalignment of group headers.

I also noticed, but it is not (only) a problem of my plugin. It's a problem in GridView isBorderBox calculation.
You can temporarily work around it by using:

if (Ext.isSafari) {
Ext.grid.GridView.prototype.borderWidth = 0;
}


what about if I want the sort icon to display on the clicked cell instead of the cell column it is sorted?

like in mystix sample above, I want the sort icon (desc/asc) to be shown in 'Before' and 'After' depending the user click on which cell?

You don't sort on the Before and After groups, you sort on the column linked to the group (specified with dataIndex or the first column of the group if no dataIndex was specified).
So why would you want to show the sort icon in the group when you are actually sorting a column?

mystix
17 Nov 2008, 11:41 PM
I also noticed, but it is not (only) a problem of my plugin. It's a problem in GridView isBorderBox calculation.
You can temporarily work around it by using:

if (Ext.isSafari) {
Ext.grid.GridView.prototype.borderWidth = 0;
}

sweet :)

teddyjas
18 Nov 2008, 12:51 AM
You don't sort on the Before and After groups, you sort on the column linked to the group (specified with dataIndex or the first column of the group if no dataIndex was specified).
So why would you want to show the sort icon in the group when you are actually sorting a column?

well just to show that on that group header there's a sorting done :)

Condor
18 Nov 2008, 1:16 AM
You could use:

Ext.apply(Ext.ux.plugins.GroupHeaderGrid.prototype.viewConfig, {
initTemplates: function() {
this.constructor.prototype.initTemplates.apply(this, arguments);
var ts = this.templates || {};
if (!ts.gcell) {
ts.gcell = new Ext.XTemplate(
'<td class="x-grid3-hd {cls} x-grid3-td-{id} ux-grid-hd-group-row-{row}" style="{style}">',
'<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">',
'<tpl if="values.btn"><a class="x-grid3-hd-btn" href="#"></a></tpl>',
'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" /></div>',
'</td>'
);
}
this.templates = ts;
this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", "");
},

updateSortIcon: function(col, dir){
var sc = this.sortClasses;
this.mainHd.select('td.x-grid3-cell,td.ux-grid-hd-group-cell').removeClass(sc);
this.mainHd.select('td.x-grid3-td-' + this.getColumnId(col) + ':not(.ux-grid-hd-nogroup-cell)').addClass(sc[dir == "DESC" ? 1 : 0]);
}
});

(but I don't really like the result, so I'm not putting this in the main code)

teddyjas
18 Nov 2008, 1:54 AM
thankss... me too actually :)

AndreTheDiminutive
23 Jan 2009, 9:16 PM
The GroupHeaderPlugin is great...truly 'plug-n-play'

Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Condor
29 Jan 2009, 12:39 AM
Following a request from AndreTheDiminutive I updated the GroupHeaderPlugin to version 1.3.

Added feature:
- Hierarchical menu now also allows showing/hiding groups.

AndreTheDiminutive
29 Jan 2009, 1:00 AM
In a word, awesome!

How do you enable the show/hide groups (what do I need to change in my version of GroupHeaderPlugin? I downloaded/unzipped/replaced the css, & js files & looked at the html but am not 'automagically' getting the group headers showing up.


Following a request from AndreTheDiminutive I updated the GroupHeaderPlugin to version 1.3.

Added feature:
- Hierarchical menu now also allows showing/hiding groups.

Condor
29 Jan 2009, 1:02 AM
Only the .js file was modified. Did you refresh the browser cache after replacing it?

You should see checkboxes for groups in the hierarchical menu now.

AndreTheDiminutive
29 Jan 2009, 1:12 AM
No luck.

Also, may I suggest putting a version # at the top of each file?


Only the .js file was modified. Did you refresh the browser cache after replacing it?

You should see checkboxes for groups in the hierarchical menu now.

Condor
29 Jan 2009, 1:18 AM
I replace the 1.3 download with one with a version number in the .js file.
I also removed some hideable:false entries I left in the column config of the example.

Does the example also not work for you or is the plugin not working in your own project?

AndreTheDiminutive
29 Jan 2009, 1:33 AM
I replace the 1.3 download with one with a version number in the .js file.
I also removed some hideable:false entries I left in the column config of the example.

Does the example also not work for you or is the plugin not working in your own project?

Your example is working. Mine is not.

I have the column show/hide not in the column header but in a tbar...in fact, I think you helped me with that code!



function getView() {
//Instantiate now for future grid delights
view2 = new Ext.grid.GridView({
forceFit: true
});
view2.colMenu = new Ext.menu.Menu({
listeners: {
beforeshow: view2.beforeColMenuShow,
itemclick: view2.handleHdMenuClick,
scope: view2
}
})
return view2;
};
function getStore() {
stori = new Ext.data.SimpleStore({
fields: ['m_lane','err_lane','30_sec_occ', '30_sec_vol', '30_sec_speed','1_min_occ', '1_min_vol', '1_min_speed','3_min_occ', '3_min_vol', '3_min_speed','6_min_occ', '6_min_vol', '6_min_speed'],
data:
zombo
})
return stori;
};
// Style the columns for the Monitored Lane grid
function getColumnModel() {
cm = new Ext.grid.ColumnModel({
columns: [
{header: 'Lane', width: 25, dataIndex: 'm_lane'},
{header: 'Err', width: 25, dataIndex: 'err_lane'},
{header: 'Occ %', width: 25, dataIndex: '30_sec_occ'},
{header: 'Vol (vph)', width: 50, dataIndex: '30_sec_vol'},
{header: 'Speed (mph)', width: 50, dataIndex: '30_sec_speed'},
{header: 'Occ %', width: 60, dataIndex: '1_min_occ'},
{header: 'Vol (vph)', width: 25, dataIndex: '1_min_vol'},
{header: 'Speed (mph)', width: 50, dataIndex: '1_min_speed'},
{header: 'Occ %', width: 50, dataIndex: '3_min_occ'},
{header: 'Vol (vph)', width: 50, dataIndex: '3_min_vol'},
{header: 'Speed (mph)', width: 50, dataIndex: '3_min_speed'},
{header: 'Occ %', width: 60, dataIndex: '6_min_occ'},
{header: 'Vol (vph)', width: 25, dataIndex: '6_min_vol'},
{header: 'Speed (mph)', width: 50, dataIndex: '6_min_speed'}
],
defaultSortable: true
})
return cm;
};
new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
xtype: 'grid',
title: 'GroupHeaderPlugin Example',
store: getStore(),
colModel: getColumnModel(),
view:getView(),
enableHdMenu:false,
tbar:[{
text:'Add/Remove Columns',
tooltip:'Add or or remove columns from this view',
iconCls:'option',
menu: view2.colMenu
}],
plugins: [new Ext.ux.plugins.GroupHeaderGrid({
rows: [
[
// {colspan: 2},
{header: '30 Second Data', colspan: 3, align: 'center'},
{header: '1 Minute Data', colspan: 3, align: 'center'},
{header: '3 Minute Data', colspan: 3, align: 'center'},
{header: '6 Minute Data', colspan: 3, align: 'center'}
// {colspan: 2}
],
// [
// {},
// {},
// {header: 'Merchandise', colspan: 3, align: 'center'},
// {},
// {header: 'Merchandise', colspan: 3, align: 'center'},
// {header: 'Sum', colspan: 2, align: 'center'}
// ]
],
hierarchicalColMenu: true
})]
}]
});
});

Condor
29 Jan 2009, 2:05 AM
The problem is that you create the colMenu before the view has been modified by the GroupHeaderGrid plugin.

Try creating your view with:

var view2 = new Ext.grid.GridView(Ext.apply({
forceFit: true
}, Ext.ux.plugins.GroupHeaderGrid.prototype.viewConfig));

ps. I did notice a small bug in handleHdMenuClick, so I'll update the v1.3 file once more.

AndreTheDiminutive
29 Jan 2009, 10:22 AM
The problem is that you create the colMenu before the view has been modified by the GroupHeaderGrid plugin.

Try creating your view with:

var view2 = new Ext.grid.GridView(Ext.apply({
forceFit: true
}, Ext.ux.plugins.GroupHeaderGrid.prototype.viewConfig));

ps. I did notice a small bug in handleHdMenuClick, so I'll update the v1.3 file once more.

I tried doing this within my 'getView' function, but Firebug gives me the following error:

'this.config[colIndex] is undefined' in ext-all-debug.js, line 33038



function getView() {
//Instantiate now for future grid delights
view2 = new Ext.grid.GridView(Ext.apply({
forcefit: true
}, Ext.ux.plugins.GroupHeaderGrid.prototype.viewConfig))
view2.colMenu = new Ext.menu.Menu({
listeners: {
beforeshow: view2.beforeColMenuShow,
itemclick: view2.handleHdMenuClick,
scope: view2
}
})

return view2;
};

Condor
29 Jan 2009, 12:12 PM
1. Did you redownload the plugin (I fixed a small bug).
2. In the code you posted above you commented out the first {colspan: 2} (which you shouldn't, otherwise the column count doesn't match).

AndreTheDiminutive
29 Jan 2009, 2:15 PM
1. Did you redownload the plugin (I fixed a small bug).
2. In the code you posted above you commented out the first {colspan: 2} (which you shouldn't, otherwise the column count doesn't match).

That fixed it.

It looks great.

Thanks!

rednix
19 Feb 2009, 8:18 AM
Thanks for this nice plugin!
I can confirm that it works in combination with the TreeGrid (by MaximGB) and the GridSummary plugin.
But you have to make sure that you include the GridSummary plugin after the GroupHeaderGrid plugin! That's very important - otherwise the resizing and re-positioning in the grid summary row will not work because the methods are overwritten by the GroupHeaderGrid.

See screenshot for an example.

ssolanki
20 Feb 2009, 10:17 AM
This is a slightly modified version of your Group Header Plugin where we have modified it to read the data from an xml instead of a simple store.
This plugin is great and works perfectly fine in Firefox as well as Google Chrome but in IE 7 it gives an error message of "'this.mainbody' is null or not an object".
Below is the code. Any help would be greatly appreciated.

Thanks,
Sapna.

This is the html code...

<!-- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml" xml: lang="en" lang="en">
<head>


<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all.js"></script>


<script type="text/javascript" src="GroupHeaderPlugin.js"></script>

<script type="text/javascript">

Ext.onReady(function() {

bldgpowerurl='sheldon.xml';

// Load the store with whole building power useage data (weekly)
var bldgpowerweeklystore = new Ext.data.Store
({

url:bldgpowerurl,
reader: new Ext.data.XmlReader
({record: 'powerUsage'},
[// set up the fields mapping into the xml doc
{name: 'Temp', mapping:'temp'},
{name: 'Temp 2', mapping: 'temp2'},
{name: 'Max', mapping: 'max'},
{name: 'Min', mapping: 'min'}
])
});
bldgpowerweeklystore.load();



new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
xtype: 'grid',
title: 'GroupHeaderPlugin Example',
store: bldgpowerweeklystore,

colModel: new Ext.grid.ColumnModel({
columns: [
{header: "Temp",width:50, dataIndex:'Temp'},
{header: "Temp 2", width: 60, dataIndex: 'Temp 2'},
{header: "Max", width: 120, dataIndex: 'Max'},
{header: "Min", width: 100, dataIndex: 'Min'}
],
defaultSortable: true
}),
viewConfig: {
forceFit: true
},
//renderTo:'mygrid',

//view: new Ext.grid.GridView(),

plugins: [new Ext.ux.plugins.GroupHeaderGrid({
rows: [
{header: 'Before', colspan: 2, align: 'center', dataIndex: 'Temp'},
{header: 'After', colspan: 3, align: 'center', dataIndex: 'Max'},
],
hierarchicalColMenu: true
})]
}]
});
});
</script>
</head>
<body>

</body>
</html>


Here is the xml..

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<powerUseageWeekly>
<powerUsage>
<temp>81.07</temp>
<temp2>540.0</temp2>
<max>35</max>
<min>2008</min>
</powerUsage>
<powerUsage>
<temp>75.50617</temp>
<temp2>10</temp2>
<max>34</max>
<min>2009</min>
</powerUsage>
<powerUsage>
<temp>7.64</temp>
<temp2>6.6136</temp2>
<max>33</max>
<min>2006</min>
</powerUsage>
<powerUsage>
<temp>84.92</temp>
<temp2>106</temp2>
<max>32</max>
<min>2005</min>
</powerUsage>
<powerUsage>
<temp>88.6263</temp>
<temp2>30.64</temp2>
<max>31</max>
<min>2004</min>
</powerUsage>
</powerUseageWeekly>

chalu
19 Mar 2009, 5:35 AM
I have a test for this superb plugin where there are just five major headers (see attached pic). But my use of it will require a situation where those headers could be more or less, and I am not in control of that.

I have a MetaGrid extension that can accept column model configurations from the server but I am wondering how I can tweak this GroupHeaderPlugin to wait for those configurations and then do it’s job on them. I have succeeded in doing same for plugins like Saki’s RecordForm.

I need hints on how to make this plugin accept config from the server like a grid can, by listening for it's store's metachange event. Quite urgent.

Regards

Condor
19 Mar 2009, 7:05 AM
I need hints on how to make this plugin accept config from the server like a grid can, by listening for it's store's metachange event. Quite urgent.

It's simply a matter of changing gridPanel.getColumnModel().rows before rerendering the grid.

slisbin
16 Apr 2009, 8:48 AM
Does using multiple rows of grouped headers allow you to move the grouped columns using drag and drop?


This plugin is based on the code from the thread below.
Old thread: http://extjs.com/forum/showthread.php?t=12677

This plugin implements support for grouping columns (see picture).

As the last update states, Condors contribution is now the main plugin and is the attached download.

Example code is contained in the downloads.

History:
07.01.08: Added support for infinite rows of grouped headers. This isn't tested much yet. Next on the list is making rowspan.
08.01.08: Added support for grouped header spanning of rows. Please read further down for more information on this.
14.01.08: Made the extension into a plugin (Thanks JorisA for the idea of making the ux a plugin!). I've tested the plugin for both GridView and GroupedView.
18.01.08: The columns got out of alignment with the headers in IE 6/7. This was fixed by alanquerioz!! :)
19.01.08: Updated the renderGroupedHeaders method.
22.02.08: Multiple updates
- vhaskilic made it possible to hide columns! :) You can download this code on attached files.
- rogerr made the plugin support the reconfigure method in the grid again.
- KRavEN got the border in no-colspan-cell's to appear by adding &nbsp to the empty header! :)
08.04.08: ApocalypseCow added a version that is using a new data structure for the grouped headers. If you used the old version of the grouped headers in your app you have to change the grouped headers definition.
- Supports toggling hide / show
- Few extras included, like changing the position of columns within its own group.
- Supports IE 6.0, IE 7.0 and FF.
Read about it and download here! (http://extjs.com/forum/showthread.php?p=149615#post149615)
12.04.08: Condor added a new version that is using the existing underlying data structure for the grouped headers. His code is also neat and tidy, and the "hackish" feel is long gone when I look at it :) This code is the new main code for this plugin, and I recommend that you continue your work on this version if you want to add new features.
Read Condors initial post about his work here (http://extjs.com/forum/showthread.php?p=151894#post151894), and about his row span work around here (http://extjs.com/forum/showthread.php?p=153709#post153709).
- Supports toggling hide / show
- Supports IE 6.0 (with a small workaround), IE 7.0 and FF.
13.11.08: GroupHeaderPlugin version 1.1 released.
- Columns contain group headers in column menu (optionally hierarchical).
- Group header events (headermousedown, headerclick, headerdblclick, headercontextmenu).
- Group header sorting and menu.
(based on GroupHeaderPlugin-widthfix)
14.11.08: GroupHeaderPlugin version 1.2 released.
- Drag & drop reorder of both columns and groups is now supported (but only within the same row!).
- Config options can now be specified in the plugin constructor as well as in the column model.
29.01.09: GroupHeaderPlugin version 1.3 released.
- Hierarchical menu now also allows showing/hiding groups.

Condor
16 Apr 2009, 9:13 AM
Yes, since version 1.2, but only within the same row and 'supergroup'.

slisbin
16 Apr 2009, 9:25 AM
1st, thanks for the quick reply. Are you saying that a 'supergroup' cannot be moved? If that is the case, is there a reasonable workaround?

Condor
16 Apr 2009, 9:54 PM
No, you can also move a supergroup.

If you take the grouped header from the example:
http://extjs.com/forum/attachment.php?attachmentid=4007&d=1200986992
1. You can move the 'Before' column before the 'Id' column or after the 'After' or 'Sum' column, but not somewhere in between.
2. You can move the 'Info' column before the 'Text' column or after the 'Info' column, but nowhere else (restricted by the 'Merchandise' column).
3. The 'Id' and 'Sum' columns look like they are stretched across multiple rows, but in drag&drop they behave as columns of the first row.

Condor
9 May 2009, 1:56 AM
I found a small problem when using GroupHeaderGrid with GroupingView.

You need to replace:

if(item.id.substr(0, 5) == 'group'){
with:

if(item.id.substr(0, 6) == 'group-'){
(otherwise it also matches the groupBy item)

Trinad
18 May 2009, 8:36 AM
Thanks for this nice plugin!
I can confirm that it works in combination with the TreeGrid (by MaximGB) and the GridSummary plugin.
But you have to make sure that you include the GridSummary plugin after the GroupHeaderGrid plugin! That's very important - otherwise the resizing and re-positioning in the grid summary row will not work because the methods are overwritten by the GroupHeaderGrid.

See screenshot for an example.


Hi,

Thanks for your suggestion reg Tree Grid & Summary/Group Plugins combination.

I have tried Tree Grid & Group Header, Fire bug is showing the following erors.

this.config[a] is undefined

this.mainBody is undefined

I am using the following code:


plugins:[expander,new Ext.ux.plugins.GroupHeaderGrid({
rows: complexHeaders,
hierarchicalColMenu: true
})]

any idea reg this errors ?

Thanks,
Trinad.

Trinad
18 May 2009, 10:02 AM
Hi,

I figured out the problem I am giving wrong dataindex in the
Ext.ux.plugins.GroupHeaderGrid rows configuration.

Thanks,
Trinad.

arifali
18 May 2009, 2:03 PM
I cannot open any of the zip files. Its giving me errors that it does not appears to be a valid archive. Can you try opening on your end and let me know. thanks

chinnapandu
17 Jun 2009, 2:53 PM
I cannot open any of the zip files.

can any one help me please, thanks

AndreTheDiminutive
17 Jun 2009, 3:35 PM
Try using Firefox to download them. I find problems with IE.

chinnapandu
17 Jun 2009, 3:48 PM
Thanks, Its working when I try using Firefox to download.

moneymore
9 Jul 2009, 4:50 PM
hi,friend,groupheaderplugin something doesn't work on ext3.0,when i filter the header,i got exception,can you update it for ext3.0?thx:D

Condor
9 Jul 2009, 11:25 PM
I still haven't had time to update the plugin to Ext 3.x. Maybe next week...

moneymore
10 Jul 2009, 7:08 AM
I still haven't had time to update the plugin to Ext 3.x. Maybe next week...

i am waiting,man:D

teddyjas
10 Jul 2009, 7:24 AM
okie I'm second in the line to wait then :)

c.hillenbrand
12 Jul 2009, 11:09 PM
If I define filter, the wrong column is marked als filtered?!


var headergroup = new Ext.ux.plugins.GroupHeaderGrid({
rows: [
[
{},
{header: 'Header1', colspan: 2, align: 'center', menuDisabled: true},
{},
{},
{}
]
],
hierarchicalColMenu: true
});


var cm = new Ext.grid.ColumnModel([
{dataIndex: 'id', header: 'Id'},
{dataIndex: 'company', header: 'Company', id: 'company'},
{dataIndex: 'price', header: 'Price'},
{dataIndex: 'name',header: 'Name'},
{dataIndex: 'size', header: 'Size'},
{dataIndex: 'visible',header: 'Visible'}
]);
cm.defaultSortable = true;



http://www.hisoh.de/img/WrongFilterColumn.jpg

Condor
13 Jul 2009, 2:02 AM
That is a problem with the filter plugin. It doesn't work correctly with this plugin.

You will have to alter the filter plugin to highlight the correct column.

AlexanderKo
13 Jul 2009, 4:50 AM
Hi. I have some problem in using GroupHeaderGrid plugin with GroupingView. The problem occurs in IE6 in standard-compliance mode. When I hide and then show column header right borders display with some offset. I have attached a screenshot of how grid looks.

Can anybody help me out on this?

alvaro1728
15 Jul 2009, 6:27 AM
Has anyone tried this plugin on the Chrome browser?

The top headers don't line up properly with the lower headers, as seen here: http://www.apocalypsecow.co.uk/ext/examples/grid/groupedHeaders/. This looks fine on IE and Firefox, but not Chrome. :s

Thanks in advance to anyone who suggests a solution!
Alvaro

Condor
15 Jul 2009, 10:20 AM
I've hidden the solution on page 14 (http://www.extjs.com/forum/showthread.php?p=251925#post251925) of this thread.

alvaro1728
15 Jul 2009, 2:51 PM
Thanks Condor, works great! B)

Condor
1 Aug 2009, 7:01 AM
I've created an Ext 3.0.0 compatible version of this plugin (here (http://www.extjs.com/forum/showthread.php?t=76322)).

nasgorkam
4 Aug 2009, 4:15 AM
ah thank you just the right ones I needed for complex grid with colspan and rowspan. Did the sort function still work with this plugins ?

Condor
4 Aug 2009, 4:21 AM
Yes, sorting isn't affected by this plugin.

Note: Row spanning is not supported!

xevin
4 Aug 2009, 9:19 AM
Hi Condor, wish u could help out, i have a grid which i would like to group things out...



(function(){

Ext.ns('Base.Module.Budget.com.QtrGridAir');

var _groupingView = Ext.extend(Ext.grid.GroupingView, {
forceFit: false,
showGroupName: true,
enableNoGroups: false,
emptyText: 'There are no list to show in this list.'
});

var _fields = [
{ header: 'Account Code', dataIndex: 'acccode', name: 'acccode', align: 'right', type: 'int', width: 90 },
{ header: 'Item Description', dataIndex: 'itemdesc', name: 'itemdesc', type: 'string', width: 150 },
{ header: 'Unit', dataIndex: 'unit', name: 'unit', type: 'string', width: 90 },
{ header: 'Qty', dataIndex: 'qty', name: 'qty', type: 'int', width: 50, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }) },
{ header: 'Cost', dataIndex: 'cost', name: 'cost', type: 'float', width: 90 },
{ header: 'Amount', dataIndex: 'amount', name: 'amount', type: 'float', width: 90 },
{ header: 'Proc.Method',dataIndex: 'procmethod', name: 'procmethod', type: 'string', width: 90 },
{ header: 'Approved Budget', dataIndex: 'approved', name: 'approved', type: 'float', width: 90 },
// 1st Quarter
{ header: 'Approved', dataIndex: 'q1qtyapp', name: 'q1qtyapp', type: 'int', width: 80, align: 'right', sortable: false },
{ header: 'Proposed', dataIndex: 'q1qtyapp', name: 'q1qtyprop', type: 'int', width: 80, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }), sortable: false },
{ header: 'Approved', dataIndex: 'q1amtapp', name: 'q1amtapp', type: 'float', width: 80, align: 'right', sortable: false },
{ header: 'Proposed', dataIndex: 'q1amtprop', name: 'q1amtprop', type: 'float', width: 80, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }), sortable: false },
// 2nd Quarter
{ header: 'Approved', dataIndex: 'q2qtyapp', name: 'q2qtyapp', type: 'int', width: 80, align: 'right', sortable: false },
{ header: 'Proposed', dataIndex: 'q2qtyprop', name: 'q2qtyprop', type: 'int', width: 80, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }), sortable: false },
{ header: 'Approved', dataIndex: 'q2amtapp', name: 'q2amtapp', type: 'float', width: 80, align: 'right', sortable: false },
{ header: 'Proposed', dataIndex: 'q2amtprop', name: 'q2amtprop', type: 'float', width: 80, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }), sortable: false },
// 3rd Quarter
{ header: 'Approved', dataIndex: 'q3qtyapp', name: 'q3qtyapp', type: 'int', width: 80, align: 'right', sortable: false },
{ header: 'Proposed', dataIndex: 'q3qtyprop', name: 'q3qtyprop', type: 'int', width: 80, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }), sortable: false },
{ header: 'Approved', dataIndex: 'q3amtapp', name: 'q3amtapp', type: 'float', width: 80, align: 'right', sortable: false },
{ header: 'Proposed', dataIndex: 'q3amtprop', name: 'q3amtprop', type: 'float', width: 80, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }), sortable: false },
// 4th Quarter
{ header: 'Approved', dataIndex: 'q4qtyapp', name: 'q4qtyapp', type: 'int', width: 80, align: 'right', sortable: false },
{ header: 'Proposed', dataIndex: 'q4qtyprop', name: 'q4qtyprop', type: 'int', width: 80, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }), sortable: false },
{ header: 'Approved', dataIndex: 'q4amtapp', name: 'q4amtapp', type: 'float', width: 80, align: 'right', sortable: false },
{ header: 'Proposed', dataIndex: 'q4amtprop', name: 'q4amtprop', type: 'float', width: 80, align: 'right', editor: new Ext.form.NumberField({ allowBlank: false }), sortable: false },

{ header: 'New Item', dataIndex: 'newitem', name: 'newitem', type: 'boolean', width: 80, align: 'center', editor: new Ext.form.Checkbox({ bodyStyle: 'margin: 0px !important;'}) },
{ header: 'Comment', dataIndex: 'comment', name: 'comment', type: 'string', width: 300, editor: new Ext.form.TextField(), sortable: false }
];

var _columns = [];

for (var i=0; i < _fields.length; i++ ) {
var data = {
header : _fields[i].header,
width : _fields[i].width,
dataIndex : _fields[i].name,
align : _fields[i].align
};

if (typeof _fields[i].editor !== 'undefined')
data.editor = _fields[i].editor;

if (typeof _fields[i].sortable !== 'undefined')
data.sortable = _fields[i].sortable;

if (typeof _fields[i].renderer !== 'undefined')
data.renderer = _fields[i].renderer;

if (typeof _fields[i].groupable !== 'undefined')
data.groupable = _fields[i].groupable;

_columns.push(data);
}

var _colModel = new Ext.grid.ColumnModel({
columns: _columns,
defaultSortable: true
});

var _dataStore = new Ext.data.GroupingStore({
reader: new Ext.data.JsonStore({
url : '',
root : 'records',
fields : _fields
}),
groupField: 'acccode'
});

var _columnGroups = new Ext.ux.plugins.GroupHeaderGrid({
rows: [
[
{colspan: 8},
{header: '1st Quarter', colspan: 4, align: 'center', dataIndex: 'q1amtprop'},
{header: '2nd Quarter', colspan: 4, align: 'center', dataIndex: 'q2amtprop'},
{header: '3rd Quarter', colspan: 4, align: 'center', dataIndex: 'q3amtprop'},
{header: '4th Quarter', colspan: 4, align: 'center', dataIndex: 'q4amtprop'},
{}, {}
],[
{header: '&nbsp;', colspan: 8 },
{header: 'Quantity', colspan: 2, align: 'center'},
{header: 'Amount', colspan: 2, align: 'center'},
{header: 'Quantity', colspan: 2, align: 'center'},
{header: 'Amount', colspan: 2, align: 'center'},
{header: 'Quantity', colspan: 2, align: 'center'},
{header: 'Amount', colspan: 2, align: 'center'},
{header: 'Quantity', colspan: 2, align: 'center'},
{header: 'Amount', colspan: 2, align: 'center'},
{header: '&nbsp;'}, {header: '&nbsp;'}
]
]
});

Base.Module.Budget.com.QtrGridAir = Ext.extend(Ext.grid.EditorGridPanel, {

constructor : function(config){
Ext.apply(this, config);
Base.Module.Budget.com.QtrGridAir.superclass.constructor.call(this);
},

cm: _colModel,
ds: _dataStore,
plugins: [_columnGroups],
view: new _groupingView(),
stripeRows: true,

Record: {
_store: _dataStore,
_record: new Ext.data.Record(),

setStore: function(store) {
this._store = store;
},

insert: function(n, v) {
this._record.set(n, v);
},

save: function() {
if (typeof this._store === 'object')
this._store.add(this._record);

this._record = new Ext.data.Record();
}
}

});

})();



I would like to Group it by Quarters... and the sorting doesn't work also, any idea?


Regards,

Kevs

Condor
4 Aug 2009, 10:15 AM
Why are you using:

constructor : function(config){
Ext.apply(this, config);
Base.Module.Budget.com.QtrGridAir.superclass.constructor.call(this);
},

1. That isn't needed.
2. If you have to, you should be using:

constructor : function(config){
Base.Module.Budget.com.QtrGridAir.superclass.constructor.call(this, config);
},

xevin
4 Aug 2009, 7:47 PM
Hi Condor, thanks, i removed the constructor part.. i updated it:



var _groupingView = Ext.extend(Ext.grid.GroupingView, {
forceFit: false,
showGroupName: true,
ignoreAdd: true,
enableNoGroups: false,
emptyText: 'There are no list to show in this list.',
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
});

..
..
..

var _dataStore = new Ext.data.GroupingStore({
reader: new Ext.data.JsonStore({
url : '',
root : 'records',
fields : _fields
}),
sortInfo:{field: 'acccode', direction: "ASC"},
groupField: 'acccode'
});

..
..
..

Base.Module.Budget.com.QtrGridAir = Ext.extend(Ext.grid.EditorGridPanel, {

cm: _colModel,
ds: _dataStore,
plugins: [_columnGroups],
view: new _groupingView(),
stripeRows: true,
collapsible: true,
animCollapse: true,

Record: {
_store: _dataStore,
_record: new Ext.data.Record(),

setStore: function(store) {
this._store = store;
},

insert: function(n, v) {
this._record.set(n, v);
},

save: function() {
if (typeof this._store === 'object')
this._store.add(this._record);

this._record = new Ext.data.Record();
}
}

});



Im having this error:



TypeError: Undefined value

at app:/References/Ext/plugin/GroupHeaderGrid/GroupHeaderGrid.js : 117

at app:/References/Ext/All.js : 9

at app:/References/Ext/Base.js : 7

at app:/References/Ext/All.js : 9

at app:/References/Ext/All.js : 9

at app:/References/Ext/All.js : 13

at app:/References/Ext/All.js : 13

y at app:/References/Ext/All.js : 9

undefined at undefined : undefined



Called using..........



(function(){

System.Util.embCSS('app:/References/Ext/plugin/GroupHeaderGrid/GroupHeaderGrid.css');

var tpl_department_cbo = new Ext.XTemplate(
'<tpl for="."><div class="x-combo-list-item">{value}</div></tpl>'
);

var QtrGridAir = new Base.Module.Budget.com.QtrGridAir({ region: 'center' });

/** Module Base */
//Module('Base.Module.Budget', {

// newBudget: function() {

QtrGridAir.Record.insert('acccode', '144');
QtrGridAir.Record.insert('itemdesc', 'Simpson');
QtrGridAir.Record.save();
QtrGridAir.Record.insert('acccode', '655');
QtrGridAir.Record.insert('itemdesc', 'Buy Lic.');
QtrGridAir.Record.save();

var form = new Ext.form.FormPanel({
plain : true,
border : false,
bodyBorder : false,
bodyStyle : { 'background': 'transparent !important' },
layout : 'border',

items: [
{
region : 'north',
layout : 'column',
xtype : 'form',
plain : true,
border : false,
borderBody : false,
height : 110,
bodyStyle : { 'padding': '10px 0px 0px 0px', 'background': 'transparent !important' },
defaults : { border: false, bodyStyle: { 'background': 'transparent !important' } },

items: [{
layout : 'form',
columnWidth : .5,

items: [{
xtype : 'combo',
mode : 'local',
triggerAction : 'all',
emptyText : 'Select a Department...',
fieldLabel : 'Department',
name : 'department',
typeAhead : true,
selectOnFocus : true,
anchor : '95%',
tpl : tpl_department_cbo
},
{
xtype : 'textarea',
name : 'comment',
fieldLabel : 'Comment',
anchor : '95%'
}]
}]
},
QtrGridAir
]
});

var win = new Ext.Window({
title : $('budget_menu_newbudget'),
height : 500,
width : 800,
resizable : true,
constrain : true,
plain : true,
autoShow : true,
maximizable : true,
bodyBorder : false,
border : false,
bodyStyle : { 'background': 'transparent !important', 'padding': '0px 5px 0px 5px' },
layout : 'fit',
iconCls : 'x-appico-coins',
renderTo : Base.UI.getFrame().getEl(),
items : [ form ],

fbar: new Ext.Toolbar({
items: [
{ text: 'Save as Draft', xtype: 'tbsplit', menu: {} },
{ xtype: 'tbfill' },
{ text: 'Save' },
{ text: 'Cancel' }
]
})
});

win.show();
// }

//});

})();


Im confused, because, i just copied the example and added some complicated fields, it Groups out when u click the Group by this column but it shows those errors in console.. By the way im using this in air..

xevin
5 Aug 2009, 5:58 PM
Duh, nevermind Condor, jajaja, although i posted much everything, sorry for the wasted KB's... iv rethinked my core to air and move it to non-sandbox mode.. and just bind some air to bridgeProxy.. thanks for the inputs

DevNullBinary
14 Oct 2009, 5:06 AM
http://extjs.com/forum/attachment.php?attachmentid=4007&d=1200986992

How can I disable the context menu from supergroup cell ? I mean disable the context menu on Before, After, Merchandise and Sum cell.

Configuration option "menuDisabled: true" seems not to work properly in this case.

Condor
14 Oct 2009, 5:32 AM
There is no config option for that, but you can use a css rule:

.ux-grid-hd-group-cell .x-grid3-hd-btn {display: none;}

DevNullBinary
14 Oct 2009, 6:34 AM
actually I've patched the plugin for such a option:


btn: this.grid.enableHdMenu && group.header && !group.menuDisabled

but the header cell is still active and do the sort after clicking. Is there any way how to disable this behaviour ?


There is no config option for that, but you can use a css rule:

.ux-grid-hd-group-cell .x-grid3-hd-btn {display: none;}

Condor
14 Oct 2009, 6:53 AM
So you want none of the group header cells to do anything?

The easiest way to do that is by removing the x-grid3-hd class from gcell template.

DevNullBinary
14 Oct 2009, 7:02 AM
Not exactly. I need the superheader column stay resizable.
Any option, which disable the click event (sorting) on superheader cell. Or how can I do that.

DevNullBinary
15 Oct 2009, 6:45 AM
In other words, I need to disable sorting on specified supergroup.

DevNullBinary
16 Oct 2009, 12:17 AM
I got it! :)
Anyway thank for your time.

Maxrunner
23 Oct 2009, 9:23 AM
ive downloaded the ext3.0 version of this, but i still get the disaligned columns in chrome.....any input?

Condor
23 Oct 2009, 9:51 AM
I've already updated my private versions:
For the correct fix you should replace the 'Ext.isBorderBox' check with 'Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2)' (in both getColumnWidth and getGroupStyle).

Maxrunner
23 Oct 2009, 10:01 AM
I've already updated my private versions:
For the correct fix you should replace the 'Ext.isBorderBox' check with 'Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2)' (in both getColumnWidth and getGroupStyle).

ive only found the 'Ext.isBorderBox' in the getGroupStyle property in the return statement:


return {
width: (Ext.isBorderBox ||(Ext.isWebKit && !Ext.isSafari2)? width : Math.max(width - this.borderWidth, 0)) + 'px',
hidden: hidden
};


Didnt found the getColumnWidth property. i assume this should be changed in the ext-all.js file?
But ive changed this, and it seems to be working with chrome now....thanks.

Maxrunner
29 Oct 2009, 7:27 AM
seeing i got no response in the 3.0 help of this plugin, might just as well post it here. This plugin is working with the exception of the header menu to hide/show the columns, i get an error if i leave the hierarquicalColMenu to true:

"menu.items is undefined".

Condor
29 Oct 2009, 7:29 AM
Sorry, normally I would try to answer your question quickly, but I'm going to be unavailable until Tuesday. Can it wait?

Maxrunner
29 Oct 2009, 8:11 AM
Well its not really urgent per see, but its been bugging me as to why isnt working where i have the example running perfectly with the hierarquicalColMenu at true........anyway heres the code:


<%@ page contentType="text/html; charset=iso-8859-1" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

(function(){



//Barra de status com mensagem inicial
var mainStatus= "Escolha o(s) grupo(s).";

//Titulo do gridPanel
var titledisp='Gestão de Grupos';

//Titulos das colunas(1)
var headerCol1='Grupo';
var headerCol2='Descrição';


//fechar janela
fechar= new Ext.Button({
text:'Fechar',
handler: function(){
parent.${param.window}.close();
}
});

//limpar campo de organica parent
limpar= new Ext.Button({
text:'Limpar',
handler: function(){
affectParent('','');
}
});

submeter= new Ext.Button({

text:'Submeter',
handler: function(){
affectParentMultiple();
}
});

remover= new Ext.Button({

text:'Remover todos',
handler: function(){
Grid.getSelectionModel().clearSelections();
}
});

seleccionar= new Ext.Button({

text:'Seleccionar todos',
handler: function(){
Grid.getSelectionModel().selectAll();
}
});


//Dados
var elemDisp = [
<c:forEach items="${elements}" varStatus="i" var="elemento">
[
'${elemento.titulo}',
'${elemento.descricao}',
${elemento.id},
'<input type="checkbox" id="${elemento.id}" value="${elemento.titulo}" />'
]
<c:if test="${!i.last}">,</c:if>
</c:forEach>
]


//Generic fields array to use in defs.
fields = ['name', 'descricao','id'];


// create the data store
GridStore = new Ext.data.SimpleStore({
fields : fields,
data : elemDisp
});


//selection model based on the checkbox system
CheckboxSM = new Ext.grid.CheckboxSelectionModel({/*header: 'Seleccionar', id: 'test',*/ width: 20});



// Column Model shortcut array
cols = new Ext.grid.ColumnModel({
columns: [
{
id : 'name',
header : headerCol1,
width : 220,
sortable : true,
dataIndex: 'name'},
{
id : 'desc',
header : headerCol2,
width : 280,
sortable : true,
dataIndex: 'descricao'},
{
id : 'desc2',
header : headerCol2,
width : 90,
sortable : true,
dataIndex: 'id'},
CheckboxSM
],
defaultSortable: true

});

// used to add records to the destination stores
// blankRecord = Ext.data.Record.create(fields);

Grid = new Ext.grid.GridPanel({

title : 'Teste',
id : 'panelGrupos',
store : GridStore,
colModel : cols,
viewConfig : {
forceFit: true
},
width : 600,
height : 350,
layout : 'anchor',
region : 'center',
sm : CheckboxSM,
tbar : [
'->',
'-',
seleccionar,
remover
],
bbar : ['->',submeter,fechar,limpar],
plugins: [new Ext.ux.plugins.GroupHeaderGrid({
rows: [
[{},
{header: 'Teste', colspan: 3, align: 'center'}
],
[
{},
{header: 'Antes', colspan: 1, align: 'center'},
{header: 'Depois', colspan: 1, align: 'center'},{}
]
],
hierarchicalColMenu: true
})]
});


function affectParent(value, description){
parent.document.getElementById('${param.valuePlaceOlder}').value=value;
parent.document.getElementById('${param.descPlaceOlder}').innerHTML=description;
parent.${param.window }.close();
}

function affectParentMultiple(){
var idsSelected = '';
var descSelected = '';
var selected =Grid.getSelectionModel().getSelections();

for(i=0;i<selected.length;i++){

idsSelected += selected[i].data.id + ';';
descSelected += selected[i].data.name + ';';
}


affectParent(idsSelected, descSelected);
}


return Grid;



})();

ahngzw
21 Jan 2010, 5:36 PM
i could't download it,Anyone can tell me how to download it.thanks

Condor
21 Jan 2010, 11:48 PM
i could't download it,Anyone can tell me how to download it.thanks

You can't download attachments from the forum with IE. Use a different browser.

StagnantIce
23 Jun 2010, 1:52 AM
Hi Condor,
I have a problem if I use GroupHeader plugin with columnLock grid.21077

I have strange symbols in headers. Can you help me?
Thank you.

Condor
23 Jun 2010, 2:38 AM
You'll need a LockingGroupHeader plugin (which I have created, but unfortunately isn't free).

neoart
6 Jul 2010, 3:18 AM
Thank you Condor.
I love this plugin,make table more readable,thanks million
May I have options to assign color for specified columnheader (even splited column) ?
Cause in my test conditions,I found that if assigne columnheader bgcolor by duplicated id ( of css) ,
will make the column uneditable
But,if have to desinge css for each column,in IE8,exceed some quentity of css will encounter error(but works in none-IE browser)

Condor
6 Jul 2010, 3:33 AM
You will need to modify renderHeaders so it adds a custom class and/or style (my current version of the Ext 3 plugin already does this).

ps. IE doesn't allow more than 31 stylesheets, but why would you need so many?

chramer
5 Jul 2011, 12:55 AM
is there a Ext4 version for this plugin ? :)
need it! help! :((

neshaug
7 Jul 2011, 1:14 AM
is there a Ext4 version for this plugin ? :)
need it! help! :((

http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/group-header-grid.html

TuanNgo
5 Jan 2012, 2:04 AM
Hi,

I use the ColumnHeaderGroup plugin which is included in the examples of the Ext-3.3.1 package.
My editorgridpanel renders OK but its column header group and original column are misaligned, as the attached file.
The problem occurs on IE8, it works OK on Firefox.

Any suggestions?

Thanks,
TuanNgo

TuanNgo
5 Jan 2012, 6:08 PM
The problem is solved after I try to hidden the column that is used as the grouping field when my editor grid panel's grouping rows is enable. :)

csaparna
27 Jan 2012, 2:47 AM
Hi,
I'm using the GroupHeaderPlugin-1.3.. In my grid, I wanted to show the border for the cells also. So have done the following change to the css -
.x-grid3-cell {border-left: solid 1px #EDEDED;}
But, this resulted in my last column to got out of the Grid. To fix that, I have modified -

.x-grid3 table {table-layout:auto;}Again, this gives rise to new problem of disorted cells. This mainly happens due to the size of the data in the cell.. if all my cells contain 2 digit numbers, it comes out fine. But, if any one of the cell contains more than 2, that entire row gets disorted.
Can anyone please help me in fixing this??

pmachner
11 May 2012, 5:58 AM
Hi,
First of all, thanks to all contributors of this plugin. I've played around with it a little bit and it looks promising :)

I have a question: does anyone know how to make this plugin display the lowest column grouped?
I basically have the same question as Burdor Turtle here:
http://stackoverflow.com/questions/10139931/extjs-one-column-header-for-multiple-columns
but for Ext 2.x.
One solution that came to my mind would be just to hide the lowest column, but maybe there's an easier way?

Thanks

kazeshini
28 Oct 2013, 2:12 AM
ty for great code. does this code work on extjs4.2 base project too?