PDA

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



brycekmartin
10 Mar 2010, 11:51 AM
Ok everybody here is my first plugin! It is an adaptation of the GroupSummary plugin to work with Mankz's LockingGroupingGridView (http://www.extjs.com/forum/showthread.php?t=92797) Extension.

A live example will be coming in the next few days.

Here is the zip that you can unpack into the examples folder of a standard Ext3.1.1 structure.

lockinggridgroupsummary.zip (http://bit.ly/a7wMBR)

Post any bugs or issues here and I'll do my best to fix them. Or if you have any issues that you resolve yourself, post them so I can merge the code and update this download.

Check out the Live Example (http://www.bravobryce.com/extExamples/extjsLockingGridGroupSummary.html)
Thanks

albeva
12 Mar 2010, 2:40 AM
that's pretty nice. I think that should be build-in. Anyways good work.

brycekmartin
12 Mar 2010, 5:33 AM
Yeah, I wouldn't mind seeing it fall into a higher code base. It would be nice if the Grid would start to soak up some of these features as a standard option or the views themselves...

I'm working on a Grid Summary right now for the LockingGroupingGridView... stay tuned over the next week or so to see that announcement hopefully. Then I'll have to make sure they work together :)

mystix
12 Mar 2010, 8:14 AM
I'm working on a Grid Summary right now for the LockingGroupingGridView... stay tuned over the next week or so to see that announcement hopefully.


and what will that be called? :-?

at the rate this is going, it'll be harder to pronounce the plugin's name than to actually use it :))


looking forward to your announcement ;)

brycekmartin
17 Mar 2010, 5:57 AM
hahaha. I know. It gets really tough when you try do a plugin that is for an extension because the extension usually references what it extends plus their own name. Sheesh!

I think that the long names are a sign of maturity in the framework ;)

The longer the more mature. Right?

Happy St. Patrick's Day.
It is the closest that the Irish will ever get to Christmas :))

saprot
8 May 2010, 6:52 AM
well, there I've got small prolem with your Extension. When I try to edit the last row on the bottom of my grid (editor grid panel), I'm getting following error:



r is undefined
value: r.data[field],
However, when i disable your extension, everything works fine. Line when the error is showing up is in the code from EditorGridPanel:


startEditing : function(row, col){
this.stopEditing();
if(this.colModel.isCellEditable(col, row)){
this.view.ensureVisible(row, col, true);
var r = this.store.getAt(row),
field = this.colModel.getDataIndex(col),
e = {
grid: this,
record: r,
field: field,
value: r.data[field], //HERE!!!!!!!!!!!
row: row,
column: col,
cancel:false
};

I'm using dynamically loaded grid, as described here: http://www.extjs.com/forum/showthread.php?76406-jsonStore-gt-panel.items&p=371701#post371701, makz's Ext.ux.grid.LockingGroupingGridView and your summary extension.

I don't think it is necessary to include any of my code, because it is just standard :) any suggestions why this error happens?

saprot
8 May 2010, 11:45 AM
ok, steps for everyone to recreate the error:
1. download lockinggridgroupsummary.zip (http://bit.ly/a7wMBR) from the first post
2. extract to examples folder
3. change file locking-grid-group-summary.js:


//var grid = new Ext.grid.GridPanel({
var grid = new Ext.grid.EditorGridPanel({
and add editor to some field, eg.:


{header: 'Price', width: 125, sortable: true, renderer: 'usMoney', dataIndex: 'price', summaryType: 'sum', editor : {xtype : 'numberfield'}},
When you try to edit last 4 rows on the bottom you will get error described in the post above:


r is undefined
value: r.data[field],
Why 4 rows are wrong? The number is the same as the number of groups and summary rows. I looked through plugin code, but couldnt find solution.

Anybody? :)

jelt
23 May 2010, 9:20 AM
Hi,

i just have found 2 bugs.
In the live demo ( http://www.bravobryce.com/extExamples/extjsLockingGridGroupSummary.html ) :
- resize any column
1st bug => "s is undefined" (Ext.ux.grid.LockingGridGroupSummary.js line 157)

- resize the locked column at a lesser size than required for the group text
2nd bug : grid is desynchronised between locked part and unlocked part (caused by group text become on two lines)

Edit : just have seen a 3rd bug : locked groud line and unlocked group line have the same ID.
for example "ext-gen5-gp-group-Group 1-hd" for the first group

Checked on FF3.6 and IE8

facu16
28 May 2010, 7:03 AM
Hi,

i just have found 2 bugs.
In the live demo ( http://www.bravobryce.com/extExamples/extjsLockingGridGroupSummary.html ) :
- resize any column
1st bug => "s is undefined" (Ext.ux.grid.LockingGridGroupSummary.js line 157)

- resize the locked column at a lesser size than required for the group text
2nd bug : grid is desynchronised between locked part and unlocked part (caused by group text become on two lines)

Edit : just have seen a 3rd bug : locked groud line and unlocked group line have the same ID.
for example "ext-gen5-gp-group-Group 1-hd" for the first group

Checked on FF3.6 and IE8


La solución de los Bugs presentes en el código son las siguientes:

En el archivo Ext.ux.grid.LockingGridGroupSummary.js se modificaron las siguientes etiquetas aproximadamente a partir de la linea 154:

See modified Tabs on the line 157 (Tabs: doWidth, doAllWidths and doHidden)



/**
* No se estaban direccionando correctamente el
* childNodes[c].style.width, ya que faltaba el nodo children[0] en cuyo interior es que
* se encuentra el arreglo rows[0]. Tambien se agrego la linea
* var c = (col < lockedCount) ? col : (col - lockedCount);
* la cual permite obtener la columna que se desea mover tomando en cuenta las columnas
* bloqueadas, ya que esta función moverá aquellas columnas que no esten bloqueadas porque la
* función this.view.getGroups() retorna los grupos ubicados en la parte NO bloqueada
* de la Grid, es por ello que se obtiene el indice del grupo en la perte no bloqueada de la grid
* restandole a la columna ingresada en el parámerto <code>col</code> la cantidad de colunmas
* bloqueadas (que siempre estan a la izquieda de la grid). Si la columna que se desea mover está
* en la parte bloqueda esta función no hace nada, ya que las columnas bloqueadas son movidas
* por otra función.
*
* @param col Columna que se desea mover, numero de la columna dentro de la grid que se desea mover.
* No toma en cuenta
* si está en la parte bloqueada o no.
* @param w Longitud que deberá tener la columna luego de ser movida.
* @param tw Longitud que deberá tener los div que contienen cada registro de la grid luego de
* mover la columna deseada.
* @author Bryce martin. Modificado por Freddy Castro <fcastro@menpet.gob.ve>
* @date Fre May 28 08:40:30 2010
*/
doWidth : function(col, w, tw){
var gs = this.view.getGroups(), s;
var lockedCount = this.view.cm.getLockedCount();
var c = (col < lockedCount) ? col : (col - lockedCount);
if (col >= lockedCount)
{
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[1];
s.style.width = tw;
s.firstChild.style.width = tw;
s.firstChild.children[0].rows[0].childNodes[c].style.width = w;
}
}
},

/**
* No se estaban direccionando correctamente el
* rows[0]childNodes, ya que faltaba el nodo children[0] en cuyo interior es que
* se encuentra el arreglo rows[0].
*
* @param ws Arreglo que contiene las longitudes que deberán tener las columnas luego de ser movidas.
* @param tw Longitud que deberá tener los div que contienen cada registro de la grid luego de mover
* las columnas deseadas.
* @author Bryce martin. Modificado por Freddy Castro <fcastro@menpet.gob.ve>
* @date Fre May 28 08:40:30 2010
*/
doAllWidths : function(ws, tw){
var gs = this.view.getGroups(), s, cells, wlen = ws.length;
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[1];
s.style.width = tw;
s.firstChild.style.width = tw;
cells = s.firstChild.children[0].rows[0].childNodes;
for(var j = 0; j < wlen; j++){
cells[j].style.width = ws[j];
}
}
},

/**
* No se estaban direccionando correctamente el
* childNodes[c].style.width, ya que faltaba el nodo children[0] en cuyo interior es que
* se encuentra el arreglo rows[0]. Tambien se agrego la linea
* var c = (col < lockedCount) ? col : (col - lockedCount);
* la cual permite obtener la columna que se desea ocultar tomando en cuenta las columnas
* bloqueadas, ya que esta función ocultará aquellas columnas que no esten bloqueadas porque la
* función this.view.getGroups() retorna los grupos ubicados en la parte NO bloqueada
* de la Grid, es por ello que se obtiene el indice del grupo en la perte no bloqueada de la grid
* restandole a la columna ingresada en el parámerto <code>col</code> la cantidad de colunmas
* bloqueadas (que siempre estan a la izquieda de la grid). Si la columna que se desea ocultar está.
* en la parte bloqueda esta función no hace nada, ya que las columnas bloqueadas son ocultadas
* por otra función.
*
* @param col Columna que se desea ocultar, numero de la columna dentro de la grid que se desea ocultar.
* No toma en cuenta si está en la parte bloqueada o no.
* @param hidden Indica si la columna deberá ocultarse o no.
* @param tw Longitud que deberá tener los div que contienen cada registro de la grid luego de ocultar la
* columna deseada.
* @author Bryce martin. Modificado por Freddy Castro <fcastro@menpet.gob.ve>
* @date Fre May 28 08:40:30 2010
*/
doHidden : function(col, hidden, tw){
var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';
var lockedCount = this.view.cm.getLockedCount();
var c = (col < lockedCount) ? col : (col - lockedCount);
if (col >= lockedCount)
{
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[1];
s.style.width = tw;
s.firstChild.style.width = tw;
s.firstChild.children[0].rows[0].childNodes[c].style.display = display;
}
}
}

alebar
14 Jul 2010, 1:59 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/showthread.php?76324-LockingGridPanel-Grid-with-fixed-and-scrolling-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
14 Jul 2010, 4:04 AM
Hi,
I am currently using your extension and I find it great. I' ve only one problem: when I click on locked area, an automatic right scroll of unlocked grid part is performed.
Am I doing anything wrong?
I also tried to add this extension (http://www.sencha.com/forum/showthread.php?76324-LockingGridPanel-Grid-with-fixed-and-scrolling-columns&highlight=scroll+horizontal+lock+grid) but anything happened....
Thx in advance

brycekmartin
14 Jul 2010, 6:17 AM
Thank you for this fix, I will put it in place and update the first thread with the new version details and give you credit as well.

brycekmartin
14 Jul 2010, 6:22 AM
Hi,
I am currently using your extension and I find it great. I' ve only one problem: when I click on locked area, an automatic right scroll of unlocked grid part is performed.
Am I doing anything wrong?
I also tried to add this extension (http://www.sencha.com/forum/showthread.php?76324-LockingGridPanel-Grid-with-fixed-and-scrolling-columns&highlight=scroll+horizontal+lock+grid) but anything happened....
Thx in advance

My extension is based on the LockingGroupingGridView plugin. It is not tested or recommended to be used with any other plugins or extensions. If you do get it to work with another plugin or extension please let me know and provide any code updates so that I can modify the base code and examples.

As for the automatic right scroll issue... I will look into it.

I hadn't been monitoring this much lately and will try to do a better job in the future. Sorry to those who I have not responded to quicker.

Bryce

GeorgeGG
23 Feb 2011, 4:18 AM
well, there I've got small prolem with your Extension. When I try to edit the last row on the bottom of my grid (editor grid panel), I'm getting following error:



r is undefined
value: r.data[field],
However, when i disable your extension, everything works fine. Line when the error is showing up is in the code from EditorGridPanel:


startEditing : function(row, col){
this.stopEditing();
if(this.colModel.isCellEditable(col, row)){
this.view.ensureVisible(row, col, true);
var r = this.store.getAt(row),
field = this.colModel.getDataIndex(col),
e = {
grid: this,
record: r,
field: field,
value: r.data[field], //HERE!!!!!!!!!!!
row: row,
column: col,
cancel:false
};

I'm using dynamically loaded grid, as described here: http://www.extjs.com/forum/showthread.php?76406-jsonStore-gt-panel.items&p=371701#post371701, makz's Ext.ux.grid.LockingGroupingGridView and your summary extension.

I don't think it is necessary to include any of my code, because it is just standard :) any suggestions why this error happens?

Have the same problem as!!!

Is there a solution to this problem???
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

GeorgeGG
18 Apr 2011, 2:11 AM
Has anyone worked this out???

I still have the problem.

The grid is rendered correctly but the records from the second group and so on
are messy!!!

If you see the threads example with open firebug and start selecting rows
you will see errors in the last 4.

If you modify the example you will see that the records are incorrect except the first group.

So far I have tried to solve the problem unsuccessfully.

Thanks georgegg

GeorgeGG
20 Apr 2011, 7:13 AM
Has anyone worked this out???

I still have the problem.

The grid is rendered correctly but the records from the second group and so on
are messy!!!

If you see the threads example with open firebug and start selecting rows
you will see errors in the last 4.

If you modify the example you will see that the records are incorrect except the first group.

So far I have tried to solve the problem unsuccessfully.

Thanks georgegg

anyone please???

ukandate
20 Sep 2011, 9:32 AM
Your live example is so much of help. But this was developed in 3.1.1 version. It does fails at various points with 4.0.6 version. Any plan of updating this or any pointers to fix it myself.



Ok everybody here is my first plugin! It is an adaptation of the GroupSummary plugin to work with Mankz's LockingGroupingGridView (http://www.extjs.com/forum/showthread.php?t=92797) Extension.

A live example will be coming in the next few days.

Here is the zip that you can unpack into the examples folder of a standard Ext3.1.1 structure.

lockinggridgroupsummary.zip (http://bit.ly/a7wMBR)

Post any bugs or issues here and I'll do my best to fix them. Or if you have any issues that you resolve yourself, post them so I can merge the code and update this download.

Check out the Live Example (http://www.bravobryce.com/extExamples/extjsLockingGridGroupSummary.html)
Thanks

asadsarfrazbhatti
6 Oct 2011, 9:56 PM
Hi,
no doubt it's a nice work bryce..

Currently I'm using your extension with 3.1.1 version but facing an issue after changed the 'GridPanel' to 'EdittorGridPanel', and now when i used to edit a cell, the whole layout get disturbed.. Please find the screenshots below :-
BEFORE EDITING
28554
AFTER EDITING
28555

Please suggest me some fix as I am totally stuck at this point :(

Thanks
asadsarfrazbhatti

Ivan Strakhouski
6 Jan 2012, 1:59 AM
Is there something like this for extjs 4.x ?

PercyJackson
1 Sep 2013, 4:44 AM
In extjs 4.2 , Locking Grouping Header grid has been implemented. Now in extjs 3.4 how to replicate this feature? Combining grid column grouping & freeze pane locking functionality .
http://stackoverflow.com/questions/18557091/how-to-implement-locking-group-headers-grid-in-extjs-3-4