PDA

View Full Version : LockingGridPanel - Grid with fixed and scrolling columns



Condor
1 Aug 2009, 6:53 AM
Note:
Starting from Ext 3.1 this extension has become part of the standard Ext examples and this thread will no longer be updated.

This gridpanel/editorgridpanel descendant allows you to lock columns in your grid, so they will remain fixed when the grid is scrolled.

Features:
- Re-adds locking column support from Ext 1.x.
- Supports locking/unlocking from the column menu.

The code has undergone serveral changes and is not yet fully tested. Please report any bugs you find in this thread.

The original Ext 2.x extension can be found here (http://www.extjs.com/forum/showthread.php?t=17942).

update 6:
- Initial release for Ext 3.0.
- Fixed horizontal scroll of unlocked area when clicking on the locked area.
version 1.7:
- New version numbering scheme.
- Fixed forceFit:true (although I don't see why you would want to use it).
- Fixed stripeRows:true.
version 1.7.1:
- Cleaned up display (separator line now full height and fixed 1px offsets).

Stuff to remember:
- IE can corrupt the downloaded archive - Use a different browser.

crp_spaeth
2 Aug 2009, 12:14 PM
Really nice you made this extension available for 3.0 users!
Big thanks!

jay@moduscreate.com
5 Aug 2009, 5:48 AM
Kick butt dude!

MacJK
5 Aug 2009, 6:51 AM
Hello, many thanks!

Is there any special reason why this is not a standard in Ext JS?

best regards,
Jaroslaw Kucharski

jay@moduscreate.com
5 Aug 2009, 6:53 AM
performance

bk1
6 Aug 2009, 3:40 AM
Good to see this back in Ext 3.+, Condor.

You are terrific! Keep up the wonderful work!

Gjslick
16 Aug 2009, 9:00 PM
Condor, this is the best thing since sliced bread. =D>

Is there a way to get this to work with your GroupHeaderGrid plugin though? The two of them combined is exactly what I need. The first column would be locked and would not have a colspan for its header, but I would need the others to have them. Is this at all possible?

Greg

Condor
16 Aug 2009, 11:35 PM
No, LockedGridPanel and the GroupHeaderGrid plugin currently can't work together.

I created a LockedGroupHeaderGrid plugin once, but I haven't for the Ext 3.0 release (and, unless someone pays me, I'm not planning on creating one - it's a lot of work).

Luckyman
16 Aug 2009, 11:45 PM
Create grid with forceFit:true leads to cyclic dependency

This happens because method updateAllColumnWidths call this.layout method and this.layout method call this.fitColumns which again call updateAllColumnWidth.

Condor
17 Aug 2009, 6:49 AM
Posted in the Ext 2.x thread:

I noticed the stripeRows property isn't working on the locking grid (even in the example file) for update6.

I tried using getRowClass to do it but to no avail. Any ideas on how to resolve this?

BTW: Thanks for the 3.0 version. It is a real life-saver.

I will look into this (and the fitColumns problem) when I have some time to spare...

vinepod
19 Aug 2009, 11:42 AM
Nice shooting. We clipped in a 'hack' to the old version to get it to work in 3.x, but column headings were not scrolling or aligning properly.

This version seems to be working as advertised (so far ;-)

vinepod
20 Aug 2009, 7:25 PM
hello,

i'm not sure how high on the radar safari is for you, but here it is..

it seems like there is a bug (perhaps with safari itself?) that causes the grid to repaint incorrectly when the window it resides in is resized.

if it is resized smaller, the scrollbar along the bottom and to the right extend the entire width and height of the viewport. the scrolling columns actually work correctly, but when at the far right of the grid, the locked columns scroll just a bit. ditto for the rows ~ at the bottom, the headers scroll off the top a bit.

when it is resized just a little larger, the scrollbars are repositioned correctly.

it does not seem to be a matter of what the size of the viewport actually is. if the window is resized very small (scrollbars painted entire width and height of the window), then resized a bit larger, the scrollbars are then painted correctly.

i have attached screen snaps of a viewport with incorrect scrollbars and then slightly resized larger with the scrollbars correct.

not sure if any of this makes sense or is even relevant, but i thought i would bring it up.

heck, it could just be how *we* are using the grid.

Condor
20 Aug 2009, 9:47 PM
heck, it could just be how *we* are using the grid.

Can you post the config you use to embed the grid in the tabpanel?

vinepod
21 Aug 2009, 3:58 AM
i hope this is enough code..



// --------------------------------------------------------------------
function createBondsListGrid()
{
pnlBondsListGrid = new Ext.ux.grid.LockingGridPanel(
{
// These are required to get the west panel (border layout) working correctly
// autoExpandColumn : 'securityname', // pick a column to fill the gap

id : 'BondsTab',
title : 'Bonds',

// ---------------------------------------------------------
enableHdMenu : false,
onContextMenu : Ext.emptyFn,
enableColumnHide: false, //disable column hide/show option from menu


stripeRows : true,
store : createBondsListStore(),
loadMask : true,
height : 700,
columns :
[
{ header: '#', width: 23, sortable: false, fixed: true, locked: true, dataIndex: '', id: 'numberer',
renderer : function(value, meta, record, rowIndex, colIndex, store)
{
var num = 0;
store.each( function(r)
{
if(r._groupId == record._groupId)
{
num++;
}
return record != r;
});

return num;
}},

{ header : "<BR>Security", css:'font-weight:bold;color:#336699;!important;', sortable : true,
width: 175, dataIndex :"securityname",id : 'securityname', locked: true,},
{ header : "<BR>Type", width : 70, dataIndex : "type", sortable : true, align : 'center', },
{ header : "<BR>Principal", width : 100, dataIndex : "principal", sortable : true, align : 'right', renderer:Ext.util.Format.NumberFactory(0,true,true),},
{ header : "<BR>Maturity", width : 80, dataIndex : "maturity", sortable : true, align : 'right', renderer:Ext.util.Format.dateRenderer('Y-M-d'), },
{ header : "Avg.<BR>Life", width : 50, dataIndex : "averagelife", sortable : true, align : 'right', renderer:Ext.util.Format.NumberFactory(2,false,false), },
{ header : "<BR>Factor", width : 70, dataIndex: "factor",sortable : true, align : 'right', renderer: Ext.util.Format.NumberFactory( 6, false, false ), },

{ header : 'Mtm<br>', width : 80, dataIndex : "price0", align : 'right', renderer: RenderMtmChange, },
{ header : 'Mtm<br>', width : 80, dataIndex : "price1", align : 'right', renderer: RenderMtmChange, },

{ header : "Mtm<br> Impact", id: 'mtmimpact', css:'font-weight:bold;',
width : 90, align : 'right', dataIndex : "mtmchange", sortable : true,renderer:Ext.util.Format.NumberFactory(0,true,true) },

{ header : 'Accruals<br>',
width : 90, align : 'right', dataIndex : "ai_prev_month",renderer:Ext.util.Format.NumberFactory(0,true,true) },
{ header : 'Accruals<br>',
width : 90, align : 'right', dataIndex : "ai_curr_month",renderer:Ext.util.Format.NumberFactory(0,true,true) },

{ header : 'Receivables<br>',
width : 90, align : 'right', dataIndex : "rcv_prev_month",renderer:Ext.util.Format.NumberFactory(0,true,true) },

{ header : 'Receivables<br>',
width : 90, align : 'right', dataIndex : "rcv_curr_month",renderer:Ext.util.Format.NumberFactory(0,true,true) },

{ header : "Cash<BR>Received", id: 'cashreceived', css:'font-weight:bold;',
width : 90, align : 'right', dataIndex : "cash_received", renderer:Ext.util.Format.NumberFactory(0,true,true) },
{ header : "Interest<BR>Income", id : 'interest',
width : 90, align : 'right', dataIndex : "net_cash", renderer:Ext.util.Format.NumberFactory(0,true,true) },

{ header : "<BR>P&L", id:'pnlamount', css:'font-weight:bold;',
width : 90, align : 'right', dataIndex : "total_pnl", renderer:Ext.util.Format.NumberFactory(0,true,true) },
{ header : "NAV<br>Impact(bp)", width : 60, align : 'right', dataIndex : "nav_impact", sortable:true, renderer:Ext.util.Format.NumberFactory(1,true,false) },
],


listeners :
{
activate : function()
{
setToolbarState();
}
},

});

function createBondsListStore()
{
pnlBondsListStore = new Ext.data.Store(
{
autoLoad : false,
sortInfo : { field : "securityname", direction : "ASC" },

proxy : new Ext.data.HttpProxy(
{
url : "/xxxxxxxx.php",
method : "POST",
}),

reader : new Ext.data.JsonReader(
{
root : "pnlbondlist",
},
[
{ name : 'rownum' }, // have to add this in or the export to csv doesn't work correctly - securityname is just the row numbers
{ name : "securityname", mapping : "securityname" },
{ name : "type", mapping : "type" },
{ name : "maturity", mapping : "maturity", type:'date' },
{ name : "currency", mapping : "currency" },
{ name : "price0", mapping : "price0", type:'float' },
{ name : "price1", mapping : "price1", type:'float' },
{ name : "factor", mapping : "factor", type:'float' },
{ name : "fx_rate", mapping : "fx_rate", type:'float' },
{ name : "principal", mapping : "faceamount1", type:'float' },
{ name : "averagelife", mapping : "averagelife", type:'float' },
{ name : "mtmchange", mapping : "mtmchange", type:'float' },
{ name : "ai_prev_month", mapping : "ai_prev_month", type:'float' },
{ name : "ai_curr_month", mapping : "ai_curr_month", type:'float' },
{ name : "rcv_prev_month", mapping : "rcv_prev_month",type:'float' },
{ name : "rcv_curr_month", mapping : "rcv_curr_month",type:'float' },
{ name : "cash_received", mapping : "cash_received", type:'float' },
{ name : "net_cash", mapping : "net_cash", type:'float' },
{ name : "total_pnl", mapping : "total_pnl", type:'float' },
{ name : "nav_impact", mapping : "nav_impact", type:'float' },
]),


});

return pnlBondsListStore;
}

Condor
21 Aug 2009, 4:02 AM
And you are using the result of createBondsListGrid directly as a TabPanel item?

vinepod
21 Aug 2009, 4:22 AM
in a word: yes. Here's the code where i create the tab panel:



function createDashBoardPanel()
{
pnlDashBoardTabPanel = new Ext.TabPanel(
{
autoTabs : true,
activeTab : 0,
defferedRender: false,
border : false,
autoScroll : true,

items :
[
createSummaryGrid(),
createBondsListGrid(),
createPaymentPanel(),
createFxExposurePanel(),
createSwapsPanel(),
createParameterPanel(),
createMissingPricesPanel(),
createAdminPanel(),
],
});

return pnlDashBoardTabPanel;
}

jchau
27 Aug 2009, 10:51 AM
performance

Under the ExtJS roadmap, http://www.extjs.com/products/extjs/roadmap.php, Grid View with Column Locking will be available in 3.1. Will it look and behave similar to this extension? Will performance still be an issue?

Condor
27 Aug 2009, 9:48 PM
Ext 3.1 will contain a column locking example (it will not be part of the main library), but I don't know if it will be similar to this extension.

ps. Tomorrow I'm going to post update 7 that should fix the bugs found so far.

hankin
28 Aug 2009, 8:15 AM
How would I go about customizing this solution to work with the RowExpander plugin?

Condor
28 Aug 2009, 9:00 AM
How would I go about customizing this solution to work with the RowExpander plugin?

That would be rather difficult. You would have to:
- Split the expander in a locked and unlocked part.
- Sync row heights in the locked vs. unlocked sections.

JamesC
1 Sep 2009, 1:47 AM
Great work on the plugin, just one question - is there ever going to be a way to make this work with the grouping view?

Condor
1 Sep 2009, 2:37 AM
Great work on the plugin, just one question - is there ever going to be a way to make this work with the grouping view?

Since both GroupingView and LockingGridView extend GridView, the only solution is to create a LockingGroupingView extension that combines both features.

Unfortunately, this is not going to be an easy task.

JamesC
1 Sep 2009, 4:10 AM
Indeed I had a quick try and didn't work that easily... sadly (of course) it's not as simple as just extending Ext.grid.GroupingView! Any idea if the Ext example in 3.1 will have this same issue?

Condor
11 Sep 2009, 11:58 PM
Released version 1.7.1:
- New version numbering scheme.
- Fixed forceFit:true (although I don't see why you would want to use it).
- Fixed stripeRows:true.
- Cleaned up display (separator line now full height and fixed 1px offsets).

hellogavin
18 Sep 2009, 5:10 PM
the plugin is special good, but it is not a js document.I do not konw how to use it.Could you give me an example.:)

Condor
19 Sep 2009, 1:35 AM
the plugin is special good, but it is not a js document.I do not konw how to use it.Could you give me an example.:)

It's not a plugin, it's an extension.

Simply use Ext.ux.grid.LockingGridPanel/LockingEditorGridPanel instead of Ext.grid.GridPanel/EditorGridPanel and set the first few columns to locked:true.

m.muller
1 Oct 2009, 8:51 AM
No, LockedGridPanel and the GroupHeaderGrid plugin currently can't work together.

I created a LockedGroupHeaderGrid plugin once, but I haven't for the Ext 3.0 release (and, unless someone pays me, I'm not planning on creating one - it's a lot of work).

Hi Condor,
Is it a real option ?
I think my company may afford this kind of development since we really need both of those features. For the moment we only use GroupHeader but user still asking for locked column.
Have you got a quick and coarse grain estimate for such developpment ?

Thanks
Mathias

astro
20 Oct 2009, 12:37 PM
everytime I try to use this extension I get the following error:
cm.IsLocked is not a function.

am i missing something? I've included both the JS and the css files.

Thank's

spiderman123
20 Oct 2009, 2:29 PM
i cant select something when i used this plugin with Ext.grid.CheckboxSelectionModel.

my code :


var selModel = new Ext.grid.CheckboxSelectionModel();
selModel.locked = true;

and i ve try to replace this code




isLocked : function(colIndex){
return this.config[colIndex].locked === true;
},to



isLocked :function(colIndex){
if(this.config[colIndex] instanceof Ext.grid.CheckboxSelectionModel){return true;}
return this.config[colIndex].locked === true;
},
Any ideas?????

wemerson.januario
20 Oct 2009, 6:30 PM
GOODDDDDDDDDDDDDDDD, Thanks

astro
21 Oct 2009, 8:22 AM
What did you do to get it working if you don't mine me asking?

astro
21 Oct 2009, 8:55 AM
**Update: For some reason the locked columns show up, and when I click on any row within the locked columns, the locked columns dissappear, my gridview get's cut in half and on the top half is blank space, while the bottom half has my unlocked columns and the length of these columns is = the amount of space that they should be taking up if the locked columns were on their left hand side. Really strange, tried it in all browsers and same issue. Not sure what's going on here

Ok got this working (really stupid mistake on my end not using the LockingColumnModel and instead keeping the one out of the box with Ext 3.0).

But now the only columns that show up are the ones I have said to stay locked and not all my other ones. Am I supposed to define 2 columnModals? one of the extension type and one normal type? That doesn't make sense to me and I'm sure isn't the solution.

Any help would be appreciated :)

and thank you Condor for this code, once I get it working it is going to be lifesaver!

astro
21 Oct 2009, 9:41 AM
Works as advertised.
This is awesome, I have officially discovered the world of extensions and plugins :)

Thank's again Condor I can't thank you enough for your hard work and effort.
Forgive the back-back posts.

damon1977
22 Oct 2009, 8:08 AM
I needed the locked columns to save with the state and thought I would share how I did it. Add the following function overrides to the LockingGridPanel and LockingEditorGridPanel extentions:



applyState : function(state) {
var cm = this.colModel;
var cs = state.columns;

if(cs){
for(var i = 0, len = cs.length; i < len; i++){
var s = cs[i];
var c = cm.getColumnById(s.id);
if(c){
c.hidden = s.hidden;
c.locked = s.locked;
c.width = s.width;
var oldIndex = cm.getIndexById(s.id);
if(oldIndex != i){
cm.moveColumn(oldIndex, i);
}
}
}
}
if(state.sort && this.store){
this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);
}
delete state.columns;
delete state.sort;

Ext.ux.grid.LockingEditorGridPanel.superclass.applyState.call(this, state);
},

getState : function(){
var o = {columns: []};
var cm = this.colModel;
var st = this.store;

for(var i = 0, c; (c = cm.config[i]); i++){
o.columns[i] = {
id: c.id,
width: c.width
};
if (c.locked){
o.columns[i].locked = true;
}
if(c.hidden){
o.columns[i].hidden = true;
}
}
if(st){
var ss = st.getSortState();
if(ss){
o.sort = ss;
}
}
return o;
}

damon1977
26 Oct 2009, 9:25 AM
I ran into a problem with row height. I have a grid that has variable row heights because of certain column renderers, and the locked row height is not sync'ed with the body row height so the row heights are off. I modified the processRows function in the lockingGridView to be as follows, and this appears to resolve the issue.



processRows : function(startRow, skipStripe){
if(!this.ds || this.ds.getCount() < 1){
return;
}
var rows = this.getRows(),
lrows = this.getLockedRows();
skipStripe = skipStripe || !this.grid.stripeRows;
startRow = startRow || 0;
Ext.each(rows, function(row, idx){
var lrow = lrows[idx];
row.rowIndex = idx;
lrow.rowIndex = idx;
if (!skipStripe && (idx + 1) % 2 === 0) {
row.className = row.className.replace(this.rowClsRe, ' ');
lrow.className = lrow.className.replace(this.rowClsRe, ' ');
row.className += ' x-grid3-row-alt';
lrow.className += ' x-grid3-row-alt';
}

var rHeight = Math.max(Ext.fly(row).getHeight(), Ext.fly(lrow).getHeight());
Ext.fly(row).setHeight(rHeight);
Ext.fly(lrow).setHeight(rHeight);
}, this);
if(startRow === 0){
Ext.fly(rows[0]).addClass(this.firstRowCls);
Ext.fly(lrows[0]).addClass(this.firstRowCls);
}
Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
},

tonedeaf
1 Nov 2009, 5:57 AM
Condor,

Is there a way the locking grid can work with multiline text in the cells? I had requested it before for the Ext 2.x extension, but really need this feature now for Ext 3.0 grids.

Thanks

damon1977
1 Nov 2009, 8:03 AM
Condor,

Is there a way the locking grid can work with multiline text in the cells? I had requested it before for the Ext 2.x extension, but really need this feature now for Ext 3.0 grids.

Thanks

Hey tonedeaf,

I ran into this problem too... Try changing the ProcessRows function in the LockingGridView to the code I posted in the previous message. That worked for me.

-Damon

tonedeaf
1 Nov 2009, 12:03 PM
@damon1977,

Wow! talk about instant gratification! I will definitely try out your function. And will also remember to look the previous post before submitting my feature requests :)

Thanks!

reggie12
4 Nov 2009, 9:17 AM
Are there any usage/license restrictions on this column locking extension or does it follow the same licensing rules as extjs itself?

Also, I'm just now learning extjs, so forgive me if this is a stupid question: but how do I disallow the user to pick which columns to lock/unlock in the little header dropdowns? I have a column I want it locked on, and I don't want that to be changed. I noticed that if it gets changed in the UI, I sometimes get some very weird behavior (my first column that is locked gets re-displayed again, so I have 2 columns with the same data, and then all of the column headers are mis-aligned with their data). I could be missing some property, though....who knows?

reggie12
4 Nov 2009, 9:22 AM
Nevermind to that weird behavior thing - I just hadn't set dataIndex when defining my columns. But I would still like to know how to remove the ability to lock/unlock a column from the UI.

Thank you!!

Pranay_Kumar
4 Nov 2009, 10:45 PM
http://www.extjs.com/forum/d:%5Cshare%5Clocked%20column.bmpHi Condor,

I am trying to use Locking grid extentions with Checkbox selection model. In this scenario i am trying to move the locked column just before 'checkbox selection column', in other words the selection column should always be locked and when we lock any column the first locked column should be 'selection column' and then other locked columns. The attached image may describe http://www.extjs.com/forum/D:%5Cshare%5Clocked%20column.bmpit more exactly. the problem which i faced with this approach is that it is not able to select more than one object at a time. As suggested in the previous post i tried to override the isLocked behavior as :--


isLocked :function(colIndex){
if(this.config[colIndex] instanceof Ext.grid.CheckboxSelectionModel){return true;}
return this.config[colIndex].locked === true;
}, and aslo used :--


var sm = new Ext.grid.CheckboxSelectionModel({
locked: true,
isLocked: Ext.emptyFn,
initEvents : function(){
Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.lockedInnerHd).on('mousedown', this.onHdMouseDown, this);
}, this);
}
});Any suggestions. Am i missing something?

Also thanks a lot for such a good extentions. I successfully tried to use this extension with Buffered view extention with some minor changes.

Thanks,
Pranay

http://www.extjs.com/forum/d:%5Cshare%5Clocked_column.bmp

bjw5392
17 Nov 2009, 6:45 AM
I am reconfiguring my grid based on user selection. Before the user makes a selection which configures the grid there is only a single column in the grid, which is the column that I want locked. The Ext.ux.grid.LockingColumnModel getLockedCount function didn't work very well in this case because all columns were locked and it was returning undefined, which blew up the Ext.ux.grid.LockingGridView's updateSortIcon function. So here was the change that worked for me...



getLockedCount : function(){
for(var i = 0, len = this.config.length; i < len; i++){
if(!this.isLocked(i)){
return i;
}
}

return this.config.length;
},

jlhs5
19 Nov 2009, 12:09 PM
Hello
I am adding the column locking with plugin filters, and it does not, it renders a and filters work. But blocking columns.


var columnModelRecibidas = new Ext.grid.ColumnModel([
{
id : 'mes',
header : 'Mes',
locked : true,
filterable: true,
dataIndex : 'mes',
width : 70,
sortable : true
},
{
header : "Año",
dataIndex : 'anio',
filterable: true,
width : 40,
sortable : true,
locked : true
},
{
header : "Folios",
dataIndex : 'folios',
width : 75,
sortable : true
},
{
header : "Recibidos",
dataIndex : 'recibidos',
width : 75,
sortable : true
},
{
header : "Multiples",
dataIndex : 'multiples',
width : 75,
sortable : true
},
{
header : "Turnos",
dataIndex : 'turnos',
width : 75,
sortable : true
},
{
header : "Ampliaciones",
dataIndex : 'ampliaciones',
width : 75,
sortable : true
},
{
header : "Aclaraciones",
dataIndex : 'aclaraciones',
width : 75,
sortable : true
}
]);


var gridRecibidas = new Ext.ux.grid.LockingGridPanel({
title : 'Solicitudes',
collapsible: false,
region: 'center',
margins: '5 0 0 0',
store : remoteJsonStoreRecibidas,
view : gridViewRecibidas,
bbar : pagingToolbarRecibidas,
plugins: [filtersRecibidas],
colModel : columnModelRecibidas
});

Thanks in advance

Condor
20 Nov 2009, 1:34 AM
I am adding the column locking with plugin filters, and it does not, it renders a and filters work. But blocking columns.

Can you describe what exactly doesn't work?

tester1
20 Nov 2009, 1:36 PM
Hello,

I would really like to lock one row as well.
I itend to lock the last row (which should contain a sum of all rows above). Would it possible to add this to the extension?
And is there a possibilty to lock a column on the right side instead of the left? Or even have locked columns on both sides?

Thanks,
Roger

jlhs5
20 Nov 2009, 7:11 PM
Can you describe what exactly doesn't work?
Yes, it's the url so you can see the behavior I'm talking

http://sertei.homelinux.org/sistemainterno/modulos/estadisticos/integracion.php

In the tree
Estadisticos -> Recibidas


If you see it renders a but not the freezing columns
Thanks in advance

jchau
4 Dec 2009, 12:08 PM
damon1977, thanks for your script on syncing row height. One issue I run into is changing column width. If I change the width of a locked column, rows on the locked side will change dynamically but rows on unlocked side will not.

On a separate issue, the row height seems bigger but cell height remains the same. If I have a rownumberer column on the locked side and it is a unlocked column that is causing the row height to change, the image in rownumberer column does not change with the row.

damon1977
4 Dec 2009, 12:51 PM
damon1977, thanks for your script on syncing row height. One issue I run into is changing column width. If I change the width of a locked column, rows on the locked side will change dynamically but rows on unlocked side will not.

On a separate issue, the row height seems bigger but cell height remains the same. If I have a rownumberer column on the locked side and it is a unlocked column that is causing the row height to change, the image in rownumberer column does not change with the row.

You should be able to set the height of the first locked cell using...

Ext.fly(lrow).first('td').setHeight(rHeight);

Pranay_Kumar
6 Dec 2009, 9:43 PM
http://www.extjs.com/forum/d:%5Cshare%5Clocked%20column.bmpHi Condor,

I am trying to use Locking grid extentions with Checkbox selection model. In this scenario i am trying to move the locked column just before 'checkbox selection column', in other words the selection column should always be locked and when we lock any column the first locked column should be 'selection column' and then other locked columns. The attached image may describe http://www.extjs.com/forum/D:%5Cshare%5Clocked%20column.bmpit more exactly. the problem which i faced with this approach is that it is not able to select more than one object at a time. As suggested in the previous post i tried to override the isLocked behavior as :--


isLocked :function(colIndex){
if(this.config[colIndex] instanceof Ext.grid.CheckboxSelectionModel){return true;}
return this.config[colIndex].locked === true;
}, and aslo used :--


var sm = new Ext.grid.CheckboxSelectionModel({
locked: true,
isLocked: Ext.emptyFn,
initEvents : function(){
Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.lockedInnerHd).on('mousedown', this.onHdMouseDown, this);
}, this);
}
});Any suggestions. Am i missing something?

Also thanks a lot for such a good extentions. I successfully tried to use this extension with Buffered view extention with some minor changes.

Thanks,
Pranay

http://www.extjs.com/forum/d:%5Cshare%5Clocked_column.bmp

Hi All,

Any update on this issue. I am not able to select more than one row if it is locked.

Thanks,
Pranay

feanor91
25 Jan 2010, 3:08 AM
Hi Condor.

I continue with you a discussion that has begun here : http://www.extjs.com/forum/showthread.php?t=30411&page=21? (http://www.extjs.com/forum/showthread.php?t=30411&page=21)

So I use you grid locking column extension and I whant to use Saki's Cells/Row action plugin. All works fine exept when I want to use action on a locking column : action events are'nt fired. If I unlock the column action events are fired. So, is something in you extension trap events preventing here to be fired?

Condor
25 Jan 2010, 3:22 AM
The CellActions plugin contains:

this.view.mainBody.on(cfg);

For a grid with a locked section you would need to change this to:

this.view.el.on(cfg);
so it covers both the locked and unlocked section.

feanor91
25 Jan 2010, 4:14 AM
Thanks a lot, it works fine.

feanor91
26 Jan 2010, 2:07 AM
Hi

I just see that locking grid give another problem with gridfilter plugin.

If columns are locked, then the filter is apply on the good column in the main body but the header of the filtered colum is apply on x column away, x depending of the number of columns locked. I think it's a story about mainbody but dont't know where to search. I found this in gridfilters.js :



/**
* Update the styles for the header row based on the active filters
*/
updateColumnHeadings : function () {
var view = this.grid.getView(),
hds, i, len, filter;
if (view.mainHd) {
hds = view.mainHd.select('td').removeClass(this.filterCls);
for (i = 0, len = view.cm.config.length; i < len; i++) {
filter = this.getFilter(view.cm.config[i].dataIndex);
if (filter && filter.active) {
hds.item(i).addClass(this.filterCls);
}
}
}
},

I think it's code in red that doesn't work well when columns are locked. and getview must return column that are not locked.

Condor
26 Jan 2010, 2:20 AM
Bugfix for GridFilters can be found here (http://www.extjs.com/forum/showthread.php?p=411620#post411620).

383257357@qq.com
27 Jan 2010, 8:58 PM
very good!

Alshten
3 Mar 2010, 1:54 AM
Hello,

First, your plugin is really excellent. :)

My problem is that I need to use it with the RowEditor plugin, but unfortunately, it doesn't work well, when you scroll horizontally, the buttons of the RowEditor are going outside the grid, becoming invisible.

I'd like to know if anyone encountered the same problem, and if there is a fix for that ?

Thanks :)

feanor91
3 Mar 2010, 1:57 AM
Hello

Yes, mes, same problem, I have abandoned row editor plugin to edit grid

Condor
3 Mar 2010, 2:11 AM
A RowEditor can't be used with locking columns.

It should however be possible to modify RowEditor to support editing of the unlocked columns (locked columns would be read-only).

Alshten
3 Mar 2010, 2:13 AM
Thanks for your responses, I'll try to find a solution. :)

mcouillard
15 Mar 2010, 11:52 AM
I needed the locked columns to save with the state and thought I would share how I did it. Add the following function overrides to the LockingGridPanel and LockingEditorGridPanel extentions:


Thank you! I used this as inspiration to make Ext 3.1.1 and state saving of locked columns work. I tried yours but it failed. Here's the resulting code that worked. I started with a copy of GridPanel applyState and getState. I then added 2 small pieces for locked columns.




Ext.override(Ext.grid.GridPanel, {
applyState : function(state){
var cm = this.colModel,
cs = state.columns,
store = this.store,
s,
c,
oldIndex;

if(cs){
for(var i = 0, len = cs.length; i < len; i++){
s = cs[i];
c = cm.getColumnById(s.id);
if(c){
c.hidden = s.hidden;
c.width = s.width;
c.locked = s.locked || false; //change 1 of 2
oldIndex = cm.getIndexById(s.id);
if(oldIndex != i){
cm.moveColumn(oldIndex, i);
}
}
}
}
if(store){
s = state.sort;
if(s){
store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction);
}
s = state.group;
if(store.groupBy){
if(s){
store.groupBy(s);
}else{
store.clearGrouping();
}
}

}
var o = Ext.apply({}, state);
delete o.columns;
delete o.sort;
console.debug('Ext.grid.GridPanel applyState override, this=',this,', o=',o);
Ext.grid.GridPanel.superclass.applyState.call(this, o);
},
getState : function(){
var o = {columns: []},
store = this.store,
ss,
gs;

for(var i = 0, c; (c = this.colModel.config[i]); i++){
o.columns[i] = {
id: c.id,
width: c.width
};
if (c.locked){ //change 2 of 2
o.columns[i].locked = true;
}
if(c.hidden){
o.columns[i].hidden = true;
}
}
if(store){
ss = store.getSortState();
if(ss){
o.sort = ss;
}
if(store.getGroupState){
gs = store.getGroupState();
if(gs){
o.group = gs;
}
}
}
console.debug('Ext.grid.GridPanel getState override, o=',o);
return o;
}
});

UnarmedHunter
14 May 2010, 3:38 AM
hi,

this was asked before, but not answered: is there a way how i can get the locked columns on the right side of the grid?

Condor
16 May 2010, 11:30 PM
this was asked before, but not answered: is there a way how i can get the locked columns on the right side of the grid?

It's possible, but you would have to modify this extension extensively.

DATABASICS
27 Jul 2010, 11:20 AM
http://www.extjs.com/forum/d:%5Cshare%5Clocked%20column.bmpHi Condor,

I am trying to use Locking grid extentions with Checkbox selection model. In this scenario i am trying to move the locked column just before 'checkbox selection column', in other words the selection column should always be locked and when we lock any column the first locked column should be 'selection column' and then other locked columns. The attached image may describe http://www.extjs.com/forum/D:%5Cshare%5Clocked%20column.bmpit more exactly. the problem which i faced with this approach is that it is not able to select more than one object at a time. As suggested in the previous post i tried to override the isLocked behavior as :--


isLocked :function(colIndex){
if(this.config[colIndex] instanceof Ext.grid.CheckboxSelectionModel){return true;}
return this.config[colIndex].locked === true;
}, and aslo used :--


var sm = new Ext.grid.CheckboxSelectionModel({
locked: true,
isLocked: Ext.emptyFn,
initEvents : function(){
Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.lockedInnerHd).on('mousedown', this.onHdMouseDown, this);
}, this);
}
});Any suggestions. Am i missing something?

Also thanks a lot for such a good extentions. I successfully tried to use this extension with Buffered view extention with some minor changes.

Thanks,
Pranay

http://www.extjs.com/forum/d:%5Cshare%5Clocked_column.bmp

This fix will solve the multiple selection problem:
var sm = new Ext.grid.CheckboxSelectionModel({
locked: true,
isLocked: Ext.emptyFn,
initEvents : function(){
Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
this.grid.on('render', function(){
var view = this.grid.getView();
view.lockedBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.lockedInnerHd).on('mousedown', this.onHdMouseDown, this);
}, this);
}
});

remento
10 Aug 2010, 7:11 AM
I wanted to report a minor rendering issue I am seeing in Chrome when the column header labels span multiple lines. In the example below, the locked column header is one header is one line, while the other columns are two. For some reason, Chrome overrides the height setting with an incorrect “computed value”.

I have attached a screenshot showing the issue.

Workaround, make all column headers the same number of lines.

Here is some code to recreate the issue.


<html>
....
<body>
Lock column header is one line, unlocked column is two lines
<div id="lockGrid"></div>
<br /><br />
Works fine when all column headers have the same number of lines
<div id="lockGridOk"></div>
<script type="text/javascript">
Ext.onReady(function(){
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'a'}
,{name: 'b'}
]
});
store.loadData([
['a','b']
,['aa','bb']
,['aaa','bbb']
]);
//Create the first grid (headers do not line up in chrome)
var aColumnsBad=[
{ header: "line 1"
, dataIndex: 'a'
, locked: true
, width:150
},{
header:'line 1<br/>line 2'
,dataIndex: 'b'
,width:80
}
];
//Create the second grid (headers do line up in chrome)
this.gridBad = new Ext.ux.grid.LockingGridPanel({
renderTo:'lockGrid'
,store:store
,columns: aColumnsBad
,enableColumnMove:false
,enableHdMenu:false
,height: 120
,width: 275
});

var aColumnsGood=[
{ _oa:{dateId:null}
, header: "line 1<br/>line 2"
, dataIndex: 'a'
, locked: true
, width:150
},{
header:'line 1<br/>line 2'
,dataIndex: 'b'
,width:80
}
];
// create grid
this.gridGood = new Ext.ux.grid.LockingGridPanel({
renderTo:'lockGridOk'
,store:store
,columns: aColumnsGood
,enableColumnMove:false
,enableHdMenu:false
,height: 120
,width: 275
});
});
</script>
</body>
</html>


This is a very useful extentsion and I really appreciate all the effort that has been put into it. BTW, are there any plans to update it to work with the 3.3 beta?

Condor
10 Aug 2010, 7:19 AM
Read this bugreport (http://www.sencha.com/forum/showthread.php?103762-FIXED-1114-LockingGridView-wrong-header-height-on-WebKit) (with fix).

ody
16 Aug 2010, 4:29 AM
Great extension! One problem I've ran into however is that it doesn't seem to respond to metaData from the store for creating dynamic columns, is this a known issue?

cheers

Condor
16 Aug 2010, 4:49 AM
GridView doesn't support reading columns from metaData. You probably included an extension to support that (which you didn't adapt for LockingGridView I assume?).

ody
16 Aug 2010, 5:00 AM
I use a GridPanel configured with a JsonStore, no view set and columns set to []. The store is set to autoload.. I'm not using any extensions whatsoever. Then I added this ux I set the view to new Ext.ux.grid.LockingGridView() and the colModel to new Ext.ux.grid.LockingColumnModel([]).

I take it when you use explicitly define a view this overrides/blocks or doesn't pay any attention to metaData?

thanks!

Condor
16 Aug 2010, 5:32 AM
And where do you apply the columns from the metaData to the grid? (that isn't part of Ext - you added that!).

ody
16 Aug 2010, 5:43 AM
ah, yeah, sorry I completely forgot about that bit. Currently I've got:



viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
}


So .. I'm guessing I need to poke the GridView as well. Will see what I can figure out. Thanks for pointing me in the right direction!

Condor
16 Aug 2010, 6:10 AM
You can keep that onDataChange method, but you need to move it from the viewConfig to the view.

ody
16 Aug 2010, 6:13 AM
I read the entry in the docs for the GridPanel's viewConfig and all became clear :)

tstext
23 Sep 2010, 6:33 AM
When i set enableDragDrop to true, and try to select a row from locked column area and drag it, row dragging does not work, when i do it from the non locked column area it does.


var grid = new Ext.ux.grid.LockingGridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', locked: true},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
height:350,
width:600,
enableDragDrop:true,
title:'Array Grid'
});


any help?

q512871740
25 Sep 2010, 6:44 PM
http://www.sencha.com/forum/attachment.php?attachmentid=22564&d=1285468889

tstext
13 Oct 2010, 7:44 AM
http://www.sencha.com/forum/attachment.php?attachmentid=22564&d=1285468889
?????????????

Condor
13 Oct 2010, 7:59 AM
GridSummary doesn't work with LockingGridView. You need a LockingGridSummary for that (which I offer for a small fee).

tstext
14 Oct 2010, 4:43 AM
GridSummary doesn't work with LockingGridView. You need a LockingGridSummary for that (which I offer for a small fee).

just making sure that your reply was for following question

tstext When i set enableDragDrop to true, and try to select a row from locked column area and drag it, row dragging does not work, when i do it from the non locked column area it does.



var grid = new Ext.ux.grid.LockingGridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', locked: true},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
height:350,
width:600,
enableDragDrop:true,
title:'Array Grid'

});

Condor
15 Oct 2010, 5:48 AM
No, that answer was for @q512871740.

In answer to your question: To enable drag&drop of the fixed section you would also need to use an extended Ext.grid.GridDragZone that uses 'el' instead of 'mainBody'.

tstext
18 Oct 2010, 5:14 AM
No, that answer was for @q512871740.

In answer to your question: To enable drag&drop of the fixed section you would also need to use an extended Ext.grid.GridDragZone that uses 'el' instead of 'mainBody'.


Thanks, Condor.

would you know where i can get that version of extended Ext.grid.GridDragZone for ext 3.x, i searched the thread nothing came up?

Thanks again for your help.

suiryuu89
2 Nov 2010, 2:02 AM
I'm using Ext 3.3.0 and not even the example code is working. When I disable the plugin (replace the Ext.ux.grid.LockinGridPanel with Ext.grid.GridPanel) it works fine, otherwise it shows the title and some weird component with the text 'undefined'.
I was hoping that this extension had evolved since Ext 2.x and that it could work with the GroupHeaderColumn, but so far no luck there. Has anyone got a clue why the extension is not working anymore?

Condor
2 Nov 2010, 2:12 AM
Starting with Ext 3.1 this extension has become part of the Ext SDK examples directory.

So for Ext 3.3.0 you need to use examples/ux/LockingGridView.js and not the version from this thread.

q512871740
8 Nov 2010, 5:51 PM
http://www.sencha.com/forum/attachment.php?attachmentid=22564&d=1285468889

http://www.sencha.com/forum/attachment.php?attachmentid=23218&d=1289267179
自己改了一下。ok了。I changed a bit, ok a.

Grolubao
25 Nov 2010, 6:51 AM
I'm trying hard to understand why using an hbox with LockingGridPanel doesn't make the grid to expand its width to fit the panel...

Anybody?

Condor
25 Nov 2010, 7:07 AM
Did you configure the hbox with align:'stretch' and the grid with flex:1?

Grolubao
25 Nov 2010, 7:18 AM
Thanks a lot Condor! I was making the mistake of placing the align stretch in defaults and not in layoutConfig.

Thanks a bunch again!

spiderman123
4 Jan 2011, 1:40 AM
Hi Condor,

problems will be occurred when i use this feature with gridfilters plugin. I used Extjs 3.3.1 for my app. The error that i got from firebug:



Ext.fly(view.getHeaderCell(i)) is null

updateColumnHeadings : function () {
var view = this.grid.getView(),
i, len, filter;
if (view.mainHd) {
for (i = 0, len = view.cm.config.length; i < len; i++) {
filter = this.getFilter(view.cm.config[i].dataIndex);
Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);
}
}
},
And here is my gridpanel-config:



var filters = new Ext.ux.grid.GridFilters({
filters: [
{
type: 'string',
dataIndex: 'col1'
}, {
type: 'string',
dataIndex: 'col2'
}
]
});


var grid = new Ext.grid.GridPanel({
title:this.title,
border:false,
iconCls:'grid_icon',
id:config.id,
stripeRows: true,
loadMask:true,
store: config.store,
closable:true,
tabTip: this.tabTip,
colModel: new Ext.ux.grid.LockingColumnModel([
{header: 'col1', width: 160, sortable: true, dataIndex: 'col1', id:'col1'},
{header: 'col2', width: 160, sortable: true, dataIndex: 'col2', id:'col2'}
]),
view: new Ext.ux.grid.LockingGridView(),
plugins: [filters],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: config.store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
})
});
thanks for your help!

Condor
4 Jan 2011, 2:57 AM
Can't see why that error would occur. When exactly do you get this error?

ps. Your PagingToolbar also needs to have the filters as a plugin.

spiderman123
4 Jan 2011, 3:11 AM
Hi Condor,

thx for your reply! I got error when i try to lock the column from context menu on the column header.

Condor
4 Jan 2011, 4:01 AM
Looks like a bug.

Can you try this patch?

Ext.override(Ext.ux.grid.LockingGridView, {
handleHdMenuClick : function(item){
var index = this.hdCtxIndex,
cm = this.cm,
id = item.getItemId(),
llen = cm.getLockedCount();
switch(id){
case 'lock':
if(cm.getColumnCount(true) <= llen + 1){
this.onDenyColumnLock();
return undefined;
}
cm.setLocked(index, true, llen != index);
if(llen != index){
cm.moveColumn(index, llen);
this.grid.fireEvent('columnmove', index, llen);
}
break;
case 'unlock':
if(llen - 1 != index){
cm.setLocked(index, false, true);
cm.moveColumn(index, llen - 1);
this.grid.fireEvent('columnmove', index, llen - 1);
}else{
cm.setLocked(index, false);
}
break;
default:
return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);
}
return true;
}
});

spiderman123
4 Jan 2011, 4:13 AM
thx for your quick reply! It works fine now!!!!

rivarecords
19 Jan 2011, 6:59 AM
How difficult would it be to create a buffered locking grid view?

Condor
19 Jan 2011, 8:36 AM
How difficult would it be to create a buffered locking grid view?

Someone else posted this question and I answered that it would be possible but quite a lot of work. The OP just replied today that he succeeded - maybe you should contact him?

supp
16 May 2011, 12:02 AM
Is there any way to use this pluging with "stateful"?

leaobreak
27 Jun 2011, 5:22 PM
3Q

chpsrinu
12 Dec 2011, 1:51 AM
Hi Condor,

I tried locking first two columns in my application using LockingGridPanel but no luck. Can i include this .css and .js files with ext 2.0.2 version? i did not see any error but locked columns come in one row and unlocked columns are coming in other row. i am not able to show the pic. Please throw some pointers. Appreciated your help.


Regards,
Srini

rajyalakshmi.eie
28 Mar 2012, 9:25 AM
In columnLock.js, I am getting error at statement this.lockWrap.dom.firstChild.
Error : this.lockWrap.dom is undefined. Could some one please help me track the problem.
My LockingGridPanel seems to be properly configured. here is rough view of mu logic:


var columns = [{id:'gridcmid' , header :'Name', dataIndex:'name', width:75,editor:... , locked : true},
{header : 'Size' , dataIndex:'size',width:75},
{header : 'Size' , dataIndex:'size',width:75},.......];

var columnMod = new Ext.ux.grid.LockingColumnModel(columns);
var grid = new Ext,ux.grid.LockingGridPanel({ id:'gd_access_priv' , renderTo : 'div_access_prev' , store : dataStore , stripeRows :true, cm : columnMod , sm: mySelModel , height:500,... });


And my div is defined at the bottom of the jsp. Here issue is shown at this.lockWrap.dom as undefined. Please help me let identify why is the error. I could not achieve the grid with locked column due this error.


Am using extjs-3.0

rajyalakshmi.eie
29 Mar 2012, 2:42 AM
Issue is identified. I have included extjs 3.3.1 and my column Lock plugin is extjs 3.2 /less comaptible. Finally found solution at : http://extjs.cachefly.net/ext-3.3.1/examples/grid/locking-grid.html

pariwartan
11 Aug 2013, 9:34 PM
User is not able to Unlock the column after Locking.



User is not able to Unlock the column after Locking it becuase Drop down menu is bieng disappear after it .After unlocking some other column, the drop down then appears on the first locked column.

we are using EXt 3.x, its happening only in Chrome and IE10

if i remove 'px' from getLockedWidth() function then its working.
please let me know the issue nad how to correct it.

getLockedWidth : function() {
return this.cm.getTotalLockedWidth();
},


getTotalWidth : function() {
if (!this.isLocked) {
return Ext.ux.grid.LockingGridView.superclass.getTotalWidth.apply(this,arguments);
}
return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';
},

isuvaish
14 Nov 2013, 3:54 AM
Works like a charm!