PDA

View Full Version : [3.1.1] Ext.ux.grid.LockingGroupingGridView



mankz
23 Feb 2010, 11:08 PM
Here's a combination of the LockingGridView and the regular GroupingView which comes in handy if you want both the locking and grouping functionality at the same time. Tested in IE7/8, FF3 and Safari. To test it, just extract the zip file into your Ext JS examples folder. This extension is the base for the Ext Gantt (http://www.extjs.com/forum/showthread.php?t=88699)

http://mankz.com/playground/lockinggrouping.png

Enjoy! ~o)

[UPDATE 2010-10-27] Ext JS 3.3 support added

khebs@live.com
23 Feb 2010, 11:57 PM
hey mankz, iv been looking to your Gantt, how do you make the multiple column headers with locking is it with the stock ux? show your magic.. ^^

mankz
24 Feb 2010, 6:45 AM
That's basically some magic based on Condor's groupingheader plugin adapted for the lockinggridview. When I have more time I'll look at dropping into the UX section too!

khebs@live.com
26 Feb 2010, 6:24 PM
thanks mankz, looking forward for it...it'll be nice

brycekmartin
3 Mar 2010, 11:07 AM
Great job by the way. I'm going to be testing this further with the groupSummary plugin and the gridSummary plugin to see if this will work for a project I'm working on.

I may have found a bug. If you Unlock the grid then you lose the grouped column. So for instance. Invoke the context menu from Company and choose Unlock. The Group1, Group2, etc headings disappear and only reappear if you show the column. But I don't want to show the column, I want it grouped by the column. Shouldn't Lock/Unlock leave the look of the grid unchanged except the fact the scroll bar now extends the entire grid?

Sorry for the long winded post. Just wanted to make sure I hit the angles that ran through my head.

great work
bryce

mankz
3 Mar 2010, 12:02 PM
You are right, this is kind of a special case. The grouping header is only shown in the locked part of the grid, I guess I could check if no locked columns exist and render the header into the unlocked group in that case. Good catch :)

Code in original zip package has been updated with this fix!

brycekmartin
4 Mar 2010, 5:34 AM
Just for the record, as far as I can tell the groupSummary plugin does not play well with this extension.

I'm going to play with it today to see if I can get the plugin to handle this new view correctly. No promises though. :)

mankz
4 Mar 2010, 5:37 AM
Great! Looking forward to hearing your result :)

brycekmartin
5 Mar 2010, 7:00 AM
Hey Mankz,
I'm working on getting the groupSummary plugin to work with LockingGroupingGridView. I was wondering about your use of XTemplate for the Locked/Unlocked pieces. I'm pretty new to ExtJs and I'm learning the framework as I go, so some of these nuances are blindingly obvious to me.

I think I've got a good idea of what I need to do for the groupSummary, so we'll see how it goes. I think I'd have to render a row in the Locked part and the Unlocked part as opposed to a row that spans the entire grid.

The interesting part is that it puts some garbage in both of the correct spots where I would expect there to be rendered rows, so maybe I won't. Not sure yet. Learning how applying plugins to a view works is my biggest hurdle right now.

Bryce

brycekmartin
11 Mar 2010, 7:17 AM
Here is the link to the official forum post for the LockingGroupingGridView groupSummary plugin.

It is basically the groupSummary plugin adapted to work with Mankz's LockingGroupingGridView.

http://www.extjs.com/forum/showthread.php?t=93967

asadsarfrazbhatti
16 Mar 2010, 2:05 PM
Hi,
can we use column header group and column looking together..
Regards,
Asad

mankz
16 Mar 2010, 6:57 PM
Not without some changes to the column header grouping code, which will take some effort. Feel free to take a stab at it :)

rohitvats
15 Apr 2010, 1:04 AM
Very useful extension!
Found a small bug, need to add the text in red below:


getLockedRows : function(){
if(!this.enableGrouping){
return Ext.ux.grid.LockingGroupingGridView.superclass.getLockedRows.call(this);
}
var r = [];
var g, gs = this.getLockedGroups();
for(var i = 0, len = gs.length; i < len; i++){
g = gs[i].childNodes[1].childNodes;
for(var j = 0, jlen = g.length; j < jlen; j++){
r[r.length] = g[j];
}
}
return r;
}

saprot
8 May 2010, 3:28 AM
great extension! Thanks!
However, when the grid is loaded dynamically (using method described by Condor here: http://www.extjs.com/forum/showthread.php?76406-jsonStore-gt-panel.items&p=371701#post371701), locked and unlocked column rows arent displayed properly (they are not synced vertically).

The fix is below:


.x-grid-group-locked-title {
margin-top: 5px;
}

feristhia
13 Jun 2010, 6:03 AM
Hi Mankz,

I'm new to ExtJS and very impressed with the capabilities. Especially with the extension you showed in this thread.

I have a question on the summary shown in the example, can we move it parallel / in line with the grouping header instead of appearing in the last line of the group ?

To clearly express my intention, I attached the screenshot with the position of summary that I need. And also I attach the files.

http://lh4.ggpht.com/_ofnZnO0EGzU/TBTlEk95EtI/AAAAAAAAJlk/I8jGmiAvYBc/s800/ext_js_move_summary.png



Thanks in advance,

Feris

mankz
13 Jun 2010, 10:42 AM
@feristhia Definitely doable, but a little more work is needed.

prabhukm
6 Jul 2010, 5:52 AM
I have question on maintaining the scroll position. I have more columns and rows, and the store will be loaded dynamically. At that time, the scroll position will be maintained?

mankz
6 Jul 2010, 8:59 AM
No it will not, for guidance on how to achieve that, see this post: http://www.sencha.com/learn/Ext_FAQ_Grid#Maintain_GridPanel_scroll_position_across_Store_reloads

prabhukm
6 Jul 2010, 9:36 AM
Thanks for your help

alebar
16 Jul 2010, 5:45 AM
Hi,
I am using your extension and I find it very very useful for my extents...
However I' ve only one issue: when I click on the locked area an automatic right scroll of unlocked part of the grid is performed.
I tried to add the uptdate shown in the following thread http://www.sencha.com/forum/showthre...olling-columns but it doesn't solve my issue....
Am I doing something wrong?
Currently I am using ExtJS 3.2.1.
Many thanks in advance

alebar
19 Jul 2010, 5:21 AM
Any suggestion?
:)

mankz
20 Jul 2010, 1:23 PM
I haven't seen this problem, can you post a reproducible test case?

alebar
21 Jul 2010, 1:51 AM
I haven't seen this problem, can you post a reproducible test case?

I am able to reproduce this strange behaviour only by specificating cellSelectionModel as grid property inside your examples.

// create the Grid
// To use locking functionality we must explicitly specify the LockingColumnModel and the LockingGridView
var grid = new Ext.grid.GridPanel({
store: store,
colModel: new Ext.ux.grid.LockingColumnModel([
{header: 'Group', width: 160, sortable: true, dataIndex: 'group', locked: true},
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company', locked: true},
{header: 'Price', width: 125, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 125, sortable: true, renderer: change, dataIndex: 'change'},
{header: '% Change', width: 125, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 125, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
selModel : new Ext.grid.CellSelectionModel({moveEditorOnEnter: false}),
stripeRows: true,
height: 350,
width: 500,
title: 'Locking Array Grid',
view: new Ext.ux.grid.LockingGroupingGridView({
hideGroupedColumn : true
})
});

I've tested it on Chrome and FF!
Many thx....

mankz
21 Jul 2010, 2:55 AM
When using the Ext.grid.CellSelectionModel, to avoid the focus when clicking a locked cell, use this override:



Ext.override(Ext.grid.CellSelectionModel, {
handleMouseDown : function(g, row, cell, e){
if(e.button !== 0 || this.isLocked()){
return;
}
this.select(row, cell, undefined, g.getColumnModel().isLocked(cell));
}
});

alebar
22 Jul 2010, 12:01 AM
When using the Ext.grid.CellSelectionModel, to avoid the focus when clicking a locked cell, use this override:



Ext.override(Ext.grid.CellSelectionModel, {
handleMouseDown : function(g, row, cell, e){
if(e.button !== 0 || this.isLocked()){
return;
}
this.select(row, cell, undefined, g.getColumnModel().isLocked(cell));
}
});


Thanks, it works like a charm!

radamanth
28 Jul 2010, 4:37 AM
Hi Mansk.

First of all ! congratulations for your great work, it helps me a lot. I'm currently using it with the Ext.ux.grid.LockingGridGroupSummary and it works like a charm.

But i may have found a bug. When doing a grid.getView().refresh() the locked columns duplicate themselves.
By tracking the code execution in Chrom debugger I found that it duplicate in the updateLockedWidth method in LockingGridView.js.
It does when executing line 728

this.lockedWrap.dom.style.width = (lw + rp) + 'px';

Do you have any idea of why this is happening when setting width ?

mankz
28 Jul 2010, 4:45 AM
I just tried this, and can't reproduce it in FF. Does it only happen if you're not using Ext.ux.grid.LockingGridGroupSummary? If that's the case I would look at the summary plugin to see why it's causing this.

radamanth
28 Jul 2010, 5:03 AM
Ok.
Extremly strange.
If i "only" do a grid.getView().refresh() it works fine.

But my case is more complex.

In fact, I've put in place a completly dynamic grid. The column model is defined on the server side. I retriev the information via a store. When this store is loaded, I create a colModel array and then load another store with the fields defined by the information in the colModelStore.

Then and only then can I define my grid with the right colmodel and corresponding data.

In our case, my bug happens when I do a refresh after my 2 store.load().

Very strange.

I'll keep you posted if I find out.

radamanth
28 Jul 2010, 5:07 AM
ok.... :">
I'm a little ashamed ... and that's an euphemism ...
I forgot to reinitialize an array .... so the colmodel was just growing more and more ...
mea culpa .
sorry for the disruption.

feristhia
31 Jul 2010, 4:13 AM
@feristhia Definitely doable, but a little more work is needed.

Hi Mankz,

Sorry for very late reply. Glad to know that it can be done, but is it just some configuration or needed changes in LockingGridView.js ?

Thanks,

Feris

mankz
31 Jul 2010, 8:24 AM
You'll need to override some of the functions in the extension. Check out the source and I think you'll find your way :)

feristhia
1 Aug 2010, 8:14 AM
You'll need to override some of the functions in the extension. Check out the source and I think you'll find your way :)

Thanks Mankz, will try to modify the code.

Regards,

Feris

saprot
11 Aug 2010, 9:30 PM
on ExtJS 3.3 there is an error with your extension:

this.mainBody is undefined
called in

this.mainBody.on('mousedown', this.interceptMouse, this);

it is happening probably because there are some changes in Ext.ux.grid.LockingGridView extension. Is there anything we can do? :)

mankz
11 Aug 2010, 9:41 PM
Yup, the 3.3 changes breaks this component in half. I'll update it as soon as 3.3 is out of beta, bump the thread if you think I've forgotten about it (I might have :) )

radamanth
19 Aug 2010, 6:05 AM
Thanks Mankz, will try to modify the code.

Regards,

Feris

Hi all.

I'm quite interessted in the same things that feristhia. (having the summary replaced the group title).

I didn't manage to get it done. So I tried something else.
I only manage to have the summary draw under the title zone. (between header and body so that it doesn't collapse). I did it by spliting the templates for groupheader and groupbody and adding empty hook methods to override.

But now I have a strange bug. I t has diasable the rowOver style and the rowSelected Style. :((

And when I click on a row I have an

Uncaught TypeError: Cannot read property 'rowIndex' of undefined

Here are my modified file in attachement.

If any one has any idea I'd be gratefull !


By the way if anyone have heard of a RowExpander Plugin that works on the LockingGroupingGridView ...

yeah I know I ask a :">lot.

radamanth
23 Aug 2010, 4:09 AM
Hi all.

I've got another small question.

I'm sending my data in a certain order (by groupField with a specific sort server side).

So I'd like to hava all my Group Header in the same order but it continue to be drawed by Alphabetical Order.

I can't find where the data a resorted .... any idea ?

Regards.

mankz
23 Aug 2010, 4:13 AM
You'll need to override the sortData method of your store...

radamanth
23 Aug 2010, 4:19 AM
Thanks Mankz.

I just find out tha it was the store who was sorting things (by tryong remoteSort = true) . I was wondering on how keep the sort client side and you just gave me the answer ... so Double Thanks !

Regards.

Tony

radamanth
23 Aug 2010, 5:09 AM
Hi all.

I'm quite interessted in the same things that feristhia. (having the summary replaced the group title).

I didn't manage to get it done. So I tried something else.
I only manage to have the summary draw under the title zone. (between header and body so that it doesn't collapse). I did it by spliting the templates for groupheader and groupbody and adding empty hook methods to override.

But now I have a strange bug. I t has diasable the rowOver style and the rowSelected Style. :((

And when I click on a row I have an

Uncaught TypeError: Cannot read property 'rowIndex' of undefined

Here are my modified file in attachement.

If any one has any idea I'd be gratefull !


By the way if anyone have heard of a RowExpander Plugin that works on the LockingGroupingGridView ...

yeah I know I ask a :">lot.

little UP.

Has anyone any Idea about this ?

By the way, I noticed that my attachment was wrong, so I uploaded a new one.

Regards.

radamanth
24 Aug 2010, 5:52 AM
little UP.

Has anyone any Idea about this ?

By the way, I noticed that my attachment was wrong, so I uploaded a new one.

Regards.


Hi All !


feristhia, I thinks this will interest you.

I finally manage to modify the GroupSummary plugin.
The attached version manage to draw itself in place of the Header.

I also have done some css to have it more beautiful.



/*PAS DE backgroung image sur les groups */
.x-grid-group-hd div.x-grid-group-title {
background-image: none;
}

.x-grid-group-collapsed .x-grid-group-hd div.x-grid-group-title {
background-image: none;
}


.x-grid-group-hd div.x-grid-group-title {
background: transparent no-repeat 3px 3px;
padding: 0px 0px 0px 0px;
}

/*FIN PAS DE backgroung image sur les groups */

/* Group dans la GRID */
.x-grid-group {
border-bottom: solid 1px;
border-color: #D8D8D8;
}

/*Pas de ligne bleu en dessous des group header (surcharge de exaneTheme.css et ext-All.css)*/
.x-grid-group-hd {
/* Avant border-bottom: 2px solid; */
border-bottom: none;
}


/* FIN Group dans la GRID */

Feel free to comment or correct me ! I'm just an ExtJs Novice.

Regards.

macap
6 Sep 2010, 1:23 AM
Yup, the 3.3 changes breaks this component in half. I'll update it as soon as 3.3 is out of beta, bump the thread if you think I've forgotten about it (I might have :) )

BUMP!

Hello from here Mats ;-)

I just tried to update our ExtScheduler version and run into trouble because of the Ext.ux.LockingGridView.js:



this.scroller.dom is undefined
error source line: [Break on this error] this.mainBody = new E(this.scroller.dom.firstChild);


Seems to be a problem with Ext 3.3. Do you have a newer version now?
I did not find anything in the ExtScheduler samples.


Regards from Cologne,

Martin

mankz
6 Sep 2010, 1:25 AM
Ext Scheduler 1.7 has support for Ext JS 3.3 :)

macap
6 Sep 2010, 3:23 AM
And it should work with:
http://extjs.cachefly.net/ext-3.1.1/examples/ux/LockingGridView.js

like in the Scheduler 1.7 examples?

Here it does not as others wrote in this thread.
Firebug always prints out the exception above.


Regards,

Martin

mankz
6 Sep 2010, 3:27 AM
The LockingGroupingGridView extension does not work with Ext JS 3.3. As I stated before:


I'll update it as soon as 3.3 is out of beta


:)

macap
6 Sep 2010, 3:29 AM
Ahh ok. That´s why I bumped the thread.
So I´ll wait. Uhhh I love waiting :-p ;-)


Regards,

Martin

radamanth
8 Oct 2010, 12:22 AM
Hi Everyone.

I think i found a bug on the LockingGroupingGridView.

when i do an dataStore.clearGrouping() it works almost fine. The group disapear, bu the groupField becomes visible (I'd like to keep it hidden).

But worst of all, when I do a dataStore.groupBy('myField', true) it does nothing.

My dataStore is a GroupingStore.
I use the Ext.ux.grid.LockingGroupingGridView?.

Any Idea ?

Regards.

radamanth
27 Oct 2010, 12:30 AM
The LockingGroupingGridView extension does not work with Ext JS 3.3. As I stated before:


:)

Hi Mankz.

Did you get the LockingGroupingGridView to work on the 3.3 of ExtJs ?

Do you need any help for that ?

regards

mankz
27 Oct 2010, 12:35 AM
Will try to fix this today or tomorrow :)

radamanth
27 Oct 2010, 12:38 AM
Excellent !

Thanks a lot Mankz

mankz
27 Oct 2010, 11:05 AM
Attachment in first post updated :)

radamanth
27 Oct 2010, 11:06 PM
Excellent ! Will try this today. I'll keep you informed !

radamanth
28 Oct 2010, 6:41 AM
Excellent ! Will try this today. I'll keep you informed !

I won't have the time to test it today (To much work). Maybe tomorow morning.

radamanth
29 Oct 2010, 4:55 AM
I won't have the time to test it today (To much work). Maybe tomorow morning.

I've tested it today.

It seems to works. I've not gone through a full non regression test.

I have some issue with some plugin (Ext.ux.grid.LockingGridGroupSummary who doesn't collapse anymore)


I'll keep you informed if I find why ...

alebar
24 Nov 2010, 6:50 AM
Hi all,
I'd like a suggestion to avoid following issue:
if I manually resize locked area in a manner that I make it shorter than the length of group title, I obtain that group title rows, inside locked area, result unformatted (i.e in order to contain that text they become higher than before).
However is there a way to prevent locking area resizing under a certain threshold?
What are your suggestions?
Many thanks in advance

radamanth
24 Nov 2010, 7:02 AM
Hi.

I Personnaly put my locked column unresizable.

You should be able to do it dynamiclly by overriding the setLocked method from Ext.ux.grid.LockingColumnModel.

I know it's not exactly what you're asking for but it's a start ...

mankz
25 Nov 2010, 8:02 AM
@alebar: To solve the issue with text wrapping, you'll just have to create a CSS rule for the locked group header class and set "white-space:nowrap;". That should do it :)

Condor
25 Nov 2010, 8:11 AM
And make the group text position absolute (if it isn't already), otherwise it will never display outside the containing <div>.

ps. This might not work on IE6 (haven't tested).

alebar
26 Nov 2010, 12:36 AM
@mankz: Thanks, it works!
@Condor: You are right, it doesn't work on IE6...
@radamanth: Thanks for your quick reply!

leon_tang
9 Mar 2011, 4:24 AM
Hi This is great work. I just wonder whether it is possible to apply the locking on multi grouping GridView. I think that will be more generic for use.

There is some works has already been down but still have problems
http://www.sencha.com/forum/showthread.php?94962-Locking-Multi-Grouping-Grid-View-(with-Summary)
The first level grouping does't work but second level group do work.

If that is solved, it's more useful.

Thank you.

leon_tang
9 Mar 2011, 4:27 AM
Hi This is great work. I just wonder whether it is possible to apply the locking on multi grouping GridView. I think that will be more generic for use.

There is some works has already been down but still have problems
http://www.sencha.com/forum/showthread.php?94962-Locking-Multi-Grouping-Grid-View-(with-Summary)

The first level grouping does't work but second level group do work.

If that is solved, it's more useful.

Thank you.

leon_tang
9 Mar 2011, 4:28 AM
Hi This is great work. I just wonder whether it is possible to apply the locking on multi grouping GridView. I think that will be more generic for use.

There is some works has already been done but still have problems
http://www.sencha.com/forum/showthread.php?94962-Locking-Multi-Grouping-Grid-View-(with-Summary)

The first level grouping does't work but second level group do work.

If that is solved, it's more useful.

Thank you.

mankz
9 Mar 2011, 4:28 AM
Anything is possible with Ext JS more or less, though right now it'd be a waste of time to do this on the 3 branch. Better to wait for Ext 4 to see what's inside :)

leon_tang
9 Mar 2011, 4:58 AM
I see. Thank you very much.

BTW: When will Ext 4 release?

GeorgeGG
14 Apr 2011, 9:48 AM
Has anyone successfully added summary to this?

I tryed this plugin:
http://www.sencha.com/forum/showthread.php?93967-3.1.1-Ext.ux.grid.LockingGridGroupSummary

But it seems that the row records shift upwards that many as many summary rows minus one (the first group is ok but not the others..)

Anyone please???

Thanks

Georgegg

amghw
27 May 2011, 10:38 AM
That's basically some magic based on Condor's groupingheader plugin adapted for the lockinggridview. When I have more time I'll look at dropping into the UX section too!

Hi mankz,
I am working on a project that requires all 3 capabilities (Locking + Grouping + Multiheader).
Is it possible for you to create this user extension?

Thanks!

mankz
27 May 2011, 11:32 AM
Possible in theory, yes - in real life not so much. Why don't you try using Ext 4 which theoretically should have these capabilities...

amghw
30 May 2011, 9:44 AM
Hi mankz,
Thanks for the reply.

I tried in Ext 4 (see attached).
Multiheader and Locked work together, but the grouping does not work.
I didn't try your plugin with Ext 4, but I am assuming that it's not compatible.
Can you upgrade it to 4?

Thanks!

mankz
30 May 2011, 9:47 AM
Won't be worth the effort I'm afraid. I'd advise you to report a bug on this in the bugs section, hopefully they can work it out for a future release.

amghw
30 May 2011, 10:46 AM
Gotcha.
I submitted the bug.

Thanks again.