PDA

View Full Version : [2.0] grid with locking column [NEW: Update 5]



Pages : [1] 2

MeDavid
12 Nov 2007, 4:55 PM
The one big missing feature from extjs1.x not available in extjs2 is locked columns for the grid. As we needed the locked column feature for our customers, I made an initial port to extjs2.

Instead of using Ext.grid.GridPanel you should use Ext.grid.LockingGridPanel or for an editorgrid Ext.grid.LockingEditorGridPanel.

To use it with the checkboxSelectionModel:


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


[Update 1]

Fixed scrollsync error
Row highlighting


[Update 2]

Allow to define a LockingContentModel at config time, instead of the columns array
Minor rendering issue


[Update 3]

Finally fixed the resizing of locked columns
Highlighting / selecting rows from the locked column now works correctly


[Update 4]

Fixed issue with locked autoExpand column in FF
Incorporated various fixes in this thread, Thanks to cblin, huixjan, lesul and rmesser
Included example files


[Update 5] - Only for Ext 2.2/2.2.1!

Fix: onAllColumnWidthsUpdated and onColumnWidthUpdated were called with the wrong column number for non-fixed columns.
Fix: Row rendering needed to be moved from renderUI to afterRender (for Ext 2.2 compatibility).
Fix: Row headers got out of sync when changing the column width in quirks mode.
Fix: Clicking in a fixed column of an added or updated record threw a javascript error.
Fix: The editor for fixed cells was positioned wrong (which made it invisible).
Change: The locked grid height didn't always compensate correctly for the horizontal scrollbar. This can't be fixed, so it now always is full height (but scrolling to the last record does work).


The Ext 3.0 version of this extension can be found here (http://www.extjs.com/forum/showthread.php?t=76324).

brian.moeskau
12 Nov 2007, 8:24 PM
Nice first attempt! In my non-exhaustive testing, I noticed a few issues (FF 2.0 / Mac):

The row highlight on mouseover doesn't work on locked cols and clicking in the locked area raises the error "row has no properties"
Cannot resize locked cols (you can in 1.1)
When I scroll I get "Ext.grid.GridView.superclass.syncScroll has no properties
file:/Applications/xampp/xamppfiles/htdocs/ext/sandbox/ux/LockingGridView/columnLock.js
Line 110" -- maybe a config issue on my end somehow?


Like I said though, nice job. Many people will be very happy to get a stable UX for this in place for 2.0. BTW, I'm using one of the sample grids and just swapped out GridPanel for LockingGridPanel. Let me know if any other configuration is required.



<html>
<head>
<title>2.0 Mac Test Page - Ext Base</title>
<link rel="stylesheet" type="text/css" href="../../../ext-2.0/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="columnLock.css">
<script type="text/javascript" src="../../../ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-2.0/ext-all-debug.js"></script>
<script type="text/javascript" src="columnLock.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.LockingGridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{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,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();
});
</script>
</head>
<body style="margin:20px;">
<div id="grid-example"></div>
</body>
</html>

MeDavid
12 Nov 2007, 11:51 PM
Nice first attempt! In my non-exhaustive testing, I noticed a few issues (FF 2.0 / Mac):

The row highlight on mouseover doesn't work on locked cols and clicking in the locked area raises the error "row has no properties"
Cannot resize locked cols (you can in 1.1)
When I scroll I get "Ext.grid.GridView.superclass.syncScroll has no properties
file:/Applications/xampp/xamppfiles/htdocs/ext/sandbox/ux/LockingGridView/columnLock.js
Line 110" -- maybe a config issue on my end somehow?


Like I said though, nice job. Many people will be very happy to get a stable UX for this in place for 2.0. BTW, I'm using one of the sample grids and just swapped out GridPanel for LockingGridPanel. Let me know if any other configuration is required.


Thanks for testing, I fixed the syncScroll and highlight issues. No other configuration is required. My test-case is alsmost identical (except that my case has the 'company' and 'price' columns locked by default)

wm003
13 Nov 2007, 12:29 AM
WOW! Works very good by now.Thanks for sharing :)

One issue i recognized in IE6

When locking one column, changing the the width of its header (yes, it works, even its some kind of "finetuning" to reach the little splitbar ;) ) and locking another column, the headers do not fit to the rows anymore. It works fine in FF and IE7.

See attached screenshot from IE6

As no doctype is given in the above example, this time its not the usual "dont use a doctype to get it working in IE6" issue.

Edit:
Sorry, my mistake...the "Company" column was scrolled so it only looks like a bug...everything is fine and you are my hero!:)

And brian is right: you cannot size the columns, if more than 1 are locked

Another "issue" (don't owkr, if this was possible in 1.1): I cant move/change position of locked columns, like i can with unlocked ones. But i can move an unlocked columns to the locked area. But not vice versa.

timezz
14 Nov 2007, 12:25 AM
Good job! Are there any functions which can set default columns locked?
I find a bug while i'm using "new Ext.grid.ColumnModel()".
It's fine if I use just the array format.

MeDavid
14 Nov 2007, 4:40 AM
Good job! Are there any functions which can set default columns locked?
I find a bug while i'm using "new Ext.grid.ColumnModel()".
It's fine if I use just the array format.

Thanks. THe LockingGridPanel uses a LockingColumnModel(). I updated the code to allow you to define your own column model, instead of the columns array.

seno
14 Nov 2007, 7:23 AM
cool job!
i find two bugs:
1. while clicking in the locked area raises the error "row has no properties".
2. if there are more one locked columns, only last column can resize.

MeDavid
14 Nov 2007, 9:48 AM
cool job!
i find two bugs:
1. while clicking in the locked area raises the error "row has no properties".
2. if there are more one locked columns, only last column can resize.

Thanks. Both bugs are fixed now.

jfkelley
14 Nov 2007, 1:42 PM
Forgive the newbie question, but I downloaded the zip and found no html sample. I copied the sample html above, carefully updated the script/link hrefs to my ext-2.0-rc1 download (and verified the existence of each file), but I see no horizontal scroll bar.

I'd very much like to get a demo working that resembles your screenshot!!

brian.moeskau
14 Nov 2007, 1:49 PM
Silly question, but did you actually lock any columns? None are locked by default in the code I posted. Click on the dropdown menu in the grid header and lock a column, then resize some of the other column widths. You should get a scroll bar.

jfkelley
14 Nov 2007, 2:14 PM
Thank you for the quick response!

Ah, resizing some of the columns extra wide did the trick. THANKS AGAIN!

IGNORE THIS:
Yes, I did lock columns (in various combinations). I even got the cool vertical blue line after the locked column, but no horizontal scroll bar. I also tried re-sizing the window too to see if I could force a horizontal scroll.

Same result in IE 6 and FF.

timezz
14 Nov 2007, 6:01 PM
Thanks. Both bugs are fixed now.
Great! But still, it's gonna be much better if we can set some columns locked in the code rather than on the page.
And another suggestion: could the "new Ext.grid.RowNumberer()" also be locked? Coz I can't lock the row numbers and it just moves after the locked columns.

Cheers,
Matt

MeDavid
14 Nov 2007, 11:53 PM
Great! But still, it's gonna be much better if we can set some columns locked in the code rather than on the page.

You can set the boolean 'locked' property to true in your columns array config property of the LockingGridPanel or in the LockingColumnModel.



And another suggestion: could the "new Ext.grid.RowNumberer()" also be locked? Coz I can't lock the row numbers and it just moves after the locked columns.


Same as above, give the RowNumberer a locked:true property and you should be fine.

ssmso
16 Nov 2007, 4:04 PM
It's a nice port!

I found 3 problems so far:

1. When inserting a combobox/checkbox in one of the locked columns (or anything that's higher than the default row height), the row height of locked and unlocked columns became uneven. Is there a way around it?

2. If I use a proxy to load the data, the word "undefined" is shown when the grid is loading.

3. Any unsortable locked columns will not display the drop down menu. As a result, there's no way to make them unlocked again.

I was using IE 6, by the way.

ssmso
18 Nov 2007, 10:48 PM
1. When inserting a combobox/checkbox in one of the locked columns (or anything that's higher than the default row height), the row height of locked and unlocked columns became uneven. Is there a way around it?

Answer my own question ;) : looked at 1.1.1 code and found out you can add the following code in the processRows function:


var h = Math.max(row.offsetHeight, lrow.offsetHeight);
row.style.height = lrow.style.height = h + "px";

ssmso
19 Nov 2007, 8:29 AM
Add the following line in renderUI() to fix problem 2:


var bd = this.renderRows();
if (bd == '') bd = ['', ''];

matt.hall
5 Dec 2007, 12:32 PM
When declaring a DOCTYPE, the behavior we're seeing when we lock the first column, is that a horizontal scrollbar is created and that first locked column takes up all the visible width. Additionally, the scrollbar will not allow you to scroll to see the other columns (because it's at full length).

DOCTYPEs used are...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

- Matt

mbahl
8 Dec 2007, 3:26 PM
first off awesome work! it looks great

1. has anyone used this code to create a EditorGridPanel with locking columns? I would like to use this with combos in the table
2. when setting locked: true in LockingGridPanel the column is locked but the other columns don't show up in FF or IE. The columns are all checked in the header menu and if I unlock the column they show up. Has anyone had problems with this?

mbahl
8 Dec 2007, 7:52 PM
first off awesome work! it looks great

1. has anyone used this code to create a EditorGridPanel with locking columns? I would like to use this with combos in the table
2. when setting locked: true in LockingGridPanel the column is locked but the other columns don't show up in FF or IE. The columns are all checked in the header menu and if I unlock the column they show up. Has anyone had problems with this?

2. I was able to fix this by adding the following to LockingGridPanel
render : function(id){
Ext.grid.LockingGridPanel.superclass.render.call(this, id);
this.getView().refresh(true);
}
If there are better solutions pls let me know

orangehairedboy
18 Dec 2007, 1:52 PM
I am also curious to know if there is any planned development of column locking on an EditorGridPanel?

Kalum78
20 Dec 2007, 1:57 AM
I found a little mistacle in the layout fonction, that make my code don't work.

layout : function(){

......
var c = g.getGridEl(), cm = this.cm,
expandCol = g.autoExpandColumn,
gv = this;
....

correction :

var c = g.getGridEl();
var cm = this.cm;
var expandCol = g.autoExpandColumn;
var gv = this;


Now it's works perfectly .. thanks

mjlecomte
20 Dec 2007, 4:13 AM
I found a little mistacle in the layout fonction, that make my code don't work.

layout : function(){

......
var c = g.getGridEl(), cm = this.cm,
expandCol = g.autoExpandColumn,
gv = this;
....

correction :

var c = g.getGridEl();
var cm = this.cm;
var expandCol = g.autoExpandColumn;
var gv = this;


Now it's works perfectly .. thanks
Isn't that the same code? (just formatted differently...doesn't make any change).

Kalum78
21 Dec 2007, 1:12 AM
i know but i use a grid with a lot more of columns (+20) than the example and that format resolve my problem.

vertigoMX
8 Jan 2008, 11:56 PM
Great JOB! works like a charm. But I was wondering how can I combine it with the grouping feature... For example, for the data store im using:
var store = new Ext.data.GroupingStore(...)
For obvious reasons, when the grid is grouped, column locking should be disabled.
But, I have to use: var store = new Ext.data.Store(...) In order to make column locking possible.

My question is, would it be possible to detect whether theres a group or not, so I can enable/disable Column Locking?

This should be easy if I just refresh the webpage and have grouping managed from the webpage instead of the grid control. but what if I want do both without refreshing?

And Im using a Proxy, which makes things more difficult...

any ideas on this?

mbalusu
9 Jan 2008, 11:11 AM
Does this also work with JSON data loading?

Can I also add pagin to the gris?

From the above couple of of posts about cell editing of the grid, I am assuming it is working fine :)?

Thanks,this really is a good job.

lesul
17 Jan 2008, 2:34 AM
Hey MeDavid,

thanks for the nice work you've done.

greetz Klaus

srikan999
17 Jan 2008, 5:53 AM
Silly question, but did you actually lock any columns? None are locked by default in the code I posted. Click on the dropdown menu in the grid header and lock a column, then resize some of the other column widths. You should get a scroll bar.


Presently locked columns are not editable.Whats missing in this piece of code..
We need to make them unlocked then only they are editable

lickui
23 Jan 2008, 9:48 PM
first off awesome work! it looks great
2. when setting locked: true in LockingGridPanel the column is locked but the other columns don't show up in FF or IE. The columns are all checked in the header menu and if I unlock the column they show up. Has anyone had problems with this?


yes,i have this probelm,too.if i set "locked: true" to the column "company",then the page only show the column "company".

lesul
25 Jan 2008, 3:03 AM
Found a "bug" in your renderUI function.
I use a store and loading the data via ajax.
when i intializied the grid, the row data isn't avaible, it take a few seconds until it load.
Then there is displayed undefined in the grid.
So I have changed the renderUI function:


renderUI : function(){
// ... code before
this.initElements();

var bd = this.renderRows();
// changeset begin
if (typeof bd == "string") {
bd = new Array("","");
}
// changeset end
this.mainBody.dom.innerHTML = bd[0];
this.lockedBody.dom.innerHTML = bd[1];
this.processRows(0, true);
// ... code after

nanich
15 Feb 2008, 4:22 AM
My grid using Ext.grid.lockinggridpanel has Ext.grid.checkboxselectionmodel() as the selection model . I want to show checkbox column as locked by default. can anybody please help me out in achieving this. even though i'm passing "locked:true" for that column. it's not getting locked. Please help me.

Thanks in advance.

bernd01
15 Feb 2008, 7:29 AM
Hi!

Thanks for the great work. Now working with my ultrawide reports is much more fun :)

Just one though, when I add the tooltip property to the column definition they don't show up. Usually the tooltip would pop up when hovering the column's header.

Does anybody know, how to fix that?

Thanks a lot!
Bernd

rmesser
27 Feb 2008, 12:56 PM
Thanks for doing the port, having the locked columns is a very useful feature.

However, when I set a column to locked in the config, it doesn't size right initially in Firefox (I'm using 2.0.0.12). Here's an example link:
http://64.209.140.177/javascript/reports/examples/locking_grid.html

The locked column "Company" is bigger than the content, and so everything else gets pushed to the right. I think some other people have mentioned this, but not that it only affects Firefox.

The good news is that when the page is resized, the grid re-calcs itself and then all seems well. So maybe the code just needs an extra refresh after the initial calculations? I'm sure I can work around it by adding that in myself, but I thought it was worth mentioning.

It seems fine initially in IE.

herrjj
4 Mar 2008, 9:11 PM
For clarity, can this code be implemented as an Editable Grid?

Thanks.

huixjan
6 Mar 2008, 9:54 PM
Ext.grid.LockingGridPanel = Ext.extend(Ext.grid.GridPanel, {
getView : function() {
if (!this.view) {
this.view = new Ext.grid.LockingGridView(this.viewConfig);
}
return this.view;
},
initComponent : function() {
if (!this.cm) {
this.cm = new Ext.grid.LockingColumnModel(this.columns);
delete this.columns;
}
Ext.grid.LockingGridPanel.superclass.initComponent.call(this);
}
});

Ext.grid.LockingGridView = function(config) {
Ext.apply(this, config);
if (!this.templates) this.templates = {};
if (!this.templates.master) {
this.templates.master = new Ext.Template(
'<div class="x-grid3" hidefocus="true">',
'<div class="x-grid3-locked">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{lockedHeader}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body">{lockedBody}</div></div>',
'</div>',
'<div class="x-grid3-viewport">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
'</div>',
'<div class="x-grid3-resize-marker">*</div>',
'<div class="x-grid3-resize-proxy">*</div>',
'</div>'
);
}
Ext.grid.LockingGridView.superclass.constructor.call(this);
};

Ext.extend(Ext.grid.LockingGridView, Ext.grid.GridView, {
lockText : "Lock",
unlockText : "Unlock",

//Template has changed and we need a few other pointers to keep track
initElements : function() {
var E = Ext.Element;

var el = this.grid.getGridEl();
el = el.dom.firstChild;//.dom.childNodes[1];
var cs = el.childNodes;

this.el = new E(el);

this.lockedWrap = new E(cs[0]);
this.lockedHd = new E(this.lockedWrap.dom.firstChild);
this.lockedInnerHd = this.lockedHd.dom.firstChild;
this.lockedScroller = new E(this.lockedWrap.dom.childNodes[1]);
this.lockedBody = new E(this.lockedScroller.dom.firstChild);

this.mainWrap = new E(cs[1]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
this.scroller = new E(this.mainWrap.dom.childNodes[1]);
if (this.forceFit) {
this.scroller.setStyle('overflow-x', 'hidden');
}
this.mainBody = new E(this.scroller.dom.firstChild);

this.focusEl = new E(this.scroller.dom.childNodes[1]);
this.focusEl.swallowEvent("click", true);

this.resizeMarker = new E(cs[2]);
this.resizeProxy = new E(cs[3]);
},

// private
hasLockedRows : function() {
var fc = this.lockedBody.dom.firstChild;
return fc && fc.className != 'x-grid-empty';
},

getLockedRows : function() {
return this.hasLockedRows() ? this.lockedBody.dom.childNodes : [];
},

getLockedRow : function(row) {
return this.getLockedRows()[row];
},

getCell : function(rowIndex, colIndex) {
var locked = this.cm.getLockedCount();
var row;
if (colIndex < locked) {
row = this.getLockedRow(rowIndex);
} else {
row = this.getRow(rowIndex);
colIndex -= locked;
}
return row.getElementsByTagName('td')[colIndex];
},

getHeaderCell : function(index) {
var locked = this.cm.getLockedCount();
if (index < locked) {
return this.lockedHd.dom.getElementsByTagName('td')[index];
} else {
return this.mainHd.dom.getElementsByTagName('td')[(index-locked)];
}
},

scrollToTop : function() {
Ext.grid.LockingGridView.superclass.scrollToTop.call(this);
this.syncScroll();
},

syncScroll : function(e) {
Ext.grid.LockingGridView.superclass.syncScroll.call(this, e);
var mb = this.scroller.dom;
this.lockedScroller.dom.scrollTop = mb.scrollTop;
},

processRows : function(startRow, skipStripe) {
if (this.ds.getCount() < 1) {
return;
}
skipStripe = skipStripe || !this.grid.stripeRows;
startRow = startRow || 0;
var cls = ' x-grid3-row-alt ';
var rows = this.getRows();
var lrows = this.getLockedRows();
for (var i = startRow, len = rows.length; i < len; i++) {
var row = rows[i];
var lrow = lrows[i];
row.rowIndex = i;
lrow.rowIndex = i;
if (!skipStripe) {
var isAlt = ((i+1) % 2 == 0);
var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
if (isAlt == hasAlt) {
continue;
}
if (isAlt) {
row.className += " x-grid3-row-alt";
lrow.className += " x-grid3-row-alt";
} else {
row.className = row.className.replace("x-grid3-row-alt", "");
lrow.className = lrow.className.replace("x-grid3-row-alt", "");
}
}
}
},

updateSortIcon : function(col, dir) {
var sc = this.sortClasses;
var clen = this.cm.getColumnCount();
var lclen = this.cm.getLockedCount();
var hds = this.mainHd.select('td').removeClass(sc);
var lhds = this.lockedHd.select('td').removeClass(sc);
if (lclen > 0 && col < lclen) {
lhds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
} else {
hds.item(col-lclen).addClass(sc[dir == "DESC" ? 1 : 0]);
}
},


updateAllColumnWidths : function() {
var tw = this.cm.getTotalWidth();
var lw = this.cm.getTotalLockedWidth();
var clen = this.cm.getColumnCount();
var lclen = this.cm.getLockedCount();
var ws = [];
for (var i = 0; i < clen; i++) {
ws[i] = this.getColumnWidth(i);
}

this.innerHd.firstChild.firstChild.style.width = tw - lw;
this.mainWrap.dom.style.left = lw;
this.lockedInnerHd.firstChild.firstChild.style.width = lw;

for (var i = 0; i < clen; i++) {
var hd = this.getHeaderCell(i);
hd.style.width = ws[i];
}

var ns = this.getRows();
var lns = this.getLockedRows();
for (var i = 0, len = ns.length; i < len; i++) {
ns[i].style.width = tw - lw;
ns[i].firstChild.style.width = tw-lw;
lns[i].style.width = lw;
lns[i].firstChild.style.width = lw;
for (var j = 0; j < lclen; j++) {
var row = lns[i].firstChild.rows[0];
row.childNodes[j].style.width = ws[j];
}
for (var j = lclen; j < clen; j++) {
var row = ns[i].firstChild.rows[0];
row.childNodes[j].style.width = ws[j];
}
}
this.onAllColumnWidthsUpdated(ws, tw);
},

updateColumnWidth : function(col, width) {
var w = this.cm.getColumnWidth(col);
var tw = this.cm.getTotalWidth();
var lclen = this.cm.getLockedCount();
var lw = this.cm.getTotalLockedWidth();

var hd = this.getHeaderCell(col);
hd.style.width = w;

var ns, gw;
if (col < lclen) {
ns = this.getLockedRows();
gw = lw;
this.lockedInnerHd.firstChild.firstChild.style.width = gw;
this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth();
} else {
ns = this.getRows();
gw = tw - lw;
col -= lclen;
this.innerHd.firstChild.firstChild.style.width = gw;
}

for (var i = 0, len = ns.length; i < len; i++) {
ns[i].style.width = gw;
ns[i].firstChild.style.width = gw;
ns[i].firstChild.rows[0].childNodes[col].style.width = w;
}

this.onColumnWidthUpdated(col, w, tw);
this.layout();
this.changeHeight();
},

updateColumnHidden : function(col, hidden) {
var tw = this.cm.getTotalWidth();
var lw = this.cm.getTotalLockedWidth();
var lclen = this.cm.getLockedCount();

this.innerHd.firstChild.firstChild.style.width = tw;

var display = hidden ? 'none' : '';

var hd = this.getHeaderCell(col);
hd.style.display = display;

var ns, gw;
if (col < lclen) {
ns = this.getLockedRows();
gw = lw;
this.lockedHd.dom.firstChild.firstChild.style.width = gw;
this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth();
} else {
ns = this.getRows();
gw = tw - lw;
col -= lclen;
this.innerHd.firstChild.firstChild.style.width = gw;
}

for (var i = 0, len = ns.length; i < len; i++) {
ns[i].style.width = gw;
ns[i].firstChild.style.width = gw;
ns[i].firstChild.rows[0].childNodes[col].style.display = display;
}

this.onColumnHiddenUpdated(col, hidden, tw);

delete this.lastViewWidth;
this.layout();
this.changeHeight();
},
// private
onColumnMove : function(cm, oldIndex, newIndex) {
Ext.grid.LockingGridView.superclass.onColumnMove.call(this, cm, oldIndex, newIndex);
this.changeHeight();
},
changeHeight : function() {
if (this.lockedInnerHd == undefined || this.innerHd == undefined) return;

this.lockedInnerHd.firstChild.firstChild.style.height = "auto";
this.innerHd.firstChild.firstChild.style.height = "auto";
var height = (this.lockedInnerHd.firstChild.firstChild.offsetHeight > this.innerHd.firstChild.firstChild.offsetHeight) ?
this.lockedInnerHd.firstChild.firstChild.offsetHeight : this.innerHd.firstChild.firstChild.offsetHeight;
this.lockedInnerHd.firstChild.firstChild.style.height = height;
this.innerHd.firstChild.firstChild.style.height = height;

if (this.lockedScroller == undefined || this.scroller == undefined) return;
this.lockedScroller.dom.style.height = this.el.dom.offsetHeight - height;
this.scroller.dom.style.height = this.el.dom.offsetHeight - height;
},
doRender : function(cs, rs, ds, startRow, colCount, stripe) {
var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
var tw = this.cm.getTotalWidth();
var lw = this.cm.getTotalLockedWidth();
var clen = this.cm.getColumnCount();
var lclen = this.cm.getLockedCount();
var tstyle = 'width:'+this.getTotalWidth()+';';
var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {tstyle: tstyle}, r;
for (var j = 0, len = rs.length; j < len; j++) {
r = rs[j]; cb = []; lcb = [];
var rowIndex = (j+startRow);
for (var i = 0; i < colCount; i++) {
c = cs[i];
p.id = c.id;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
p.attr = p.cellAttr = "";
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
p.style = c.style;
if (p.value == undefined || p.value === "") p.value = "*";
if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
p.css += ' x-grid3-dirty-cell';
}
if (c.locked) {
lcb[lcb.length] = ct.apply(p);
} else {
cb[cb.length] = ct.apply(p);
}
}
var alt = [];
if (stripe && ((rowIndex+1) % 2 == 0)) {
alt[0] = "x-grid3-row-alt";
}
if (r.dirty) {
alt[1] = " x-grid3-dirty-row";
}
rp.cols = colCount;
if (this.getRowClass) {
alt[2] = this.getRowClass(r, rowIndex, rp, ds);
}

rp.alt = alt.join(" ");
rp.cells = lcb.join("");
rp.tstyle = 'width:'+lw+';';
lbuf[lbuf.length] = rt.apply(rp);

rp.cells = cb.join("");
rp.tstyle = 'width:'+(tw-lw)+';';
buf[buf.length] = rt.apply(rp);
}
return [buf.join(""), lbuf.join("")];
},

renderUI : function() {

var header = this.renderHeaders();
var body = this.templates.body.apply({rows:''});


var html = this.templates.master.apply({
body: body,
header: header[0],
lockedBody: body,
lockedHeader: header[1]
});

var g = this.grid;
g.getGridEl().dom.innerHTML = html;

this.initElements();

var bd = this.renderRows();
if (bd == '') bd = ['', ''];

this.mainBody.dom.innerHTML = bd[0];
this.lockedBody.dom.innerHTML = bd[1];
this.processRows(0, true);

Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
Ext.fly(this.lockedInnerHd).on("click", this.handleHdDown, this);
this.mainHd.on("mouseover", this.handleHdOver, this);
this.mainHd.on("mouseout", this.handleHdOut, this);
this.mainHd.on("mousemove", this.handleHdMove, this);
this.lockedHd.on("mouseover", this.handleHdOver, this);
this.lockedHd.on("mouseout", this.handleHdOut, this);
this.lockedHd.on("mousemove", this.handleHdMove, this);
this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth();
this.scroller.on('scroll', this.syncScroll, this);
if (g.enableColumnResize !== false) {
this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.lockedHd.dom);
this.splitone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
this.splitone.setOuterHandleElId(Ext.id(this.mainHd.dom));
}

if (g.enableColumnMove) {
this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
}

if (g.enableHdMenu !== false) {
if (g.enableColumnHide !== false) {
this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
this.colMenu.on("itemclick", this.handleHdMenuClick, this);
}
this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
this.hmenu.add(
{id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
{id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
);
if (this.grid.enableColLock !== false) {
this.hmenu.add('-',
{id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
{id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
);
}

if (g.enableColumnHide !== false) {
this.hmenu.add('-',
{id:"columns", text: this.columnsText, menu: this.colMenu, iconCls: 'x-cols-icon'}
);
}
this.hmenu.on("itemclick", this.handleHdMenuClick, this);
}

if (g.enableDragDrop || g.enableDrag) {
var dd = new Ext.grid.GridDragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}
this.updateHeaderSortState();
},

layout : function() {
if (!this.mainBody) {
return;
}
var g = this.grid;
var c = g.getGridEl(), cm = this.cm,
expandCol = g.autoExpandColumn,
gv = this;
var lw = cm.getTotalLockedWidth();
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';
this.lockedScroller.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- lw, vh);
var scrollbar = (this.scroller.dom.scrollWidth > this.scroller.dom.clientWidth)?17:0;
this.lockedScroller.setSize(cm.getTotalLockedWidth(), vh-scrollbar);
if (this.innerHd) {
this.innerHd.style.width = (vw)+'px';
}
}
if (this.forceFit) {
if (this.lastViewWidth != vw) {
this.fitColumns(false, false);
this.lastViewWidth = vw;
}
} else {
this.autoExpand();
}
this.mainWrap.dom.style.left = lw +'px';

this.onLayout(vw, vh);
},

renderHeaders : function() {
var cm = this.cm, ts = this.templates;
var ct = ts.hcell;
var tw = this.cm.getTotalWidth();
var lw = this.cm.getTotalLockedWidth();

var cb = [], lb = [], sb = [], lsb = [], p = {};

for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
p.id = cm.getColumnId(i);
p.value = cm.getColumnHeader(i) || "";
p.style = this.getColumnStyle(i, true);
p.tooltip = this.getColumnTooltip(i);

if (cm.config[i].align == 'right') {
p.istyle = 'padding-right:16px';
}
if (cm.isLocked(i)) {
lb[lb.length] = ct.apply(p);
} else {
cb[cb.length] = ct.apply(p);
}
}
return [ts.header.apply({cells: cb.join(""), tstyle:'width:'+(tw-lw)+';'}),
ts.header.apply({cells: lb.join(""), tstyle:'width:'+(lw)+';'})];
},

// private
getColumnTooltip : function(i) {
var tt = this.cm.getColumnTooltip(i);
if (tt) {
if (Ext.QuickTips.isEnabled()) {
return 'ext:qtip="'+tt+'"';
} else {
return 'title="'+tt+'"';
}
}
return "";
},

updateHeaders : function() {
var hd = this.renderHeaders();
this.innerHd.firstChild.innerHTML = hd[0];
this.lockedInnerHd.firstChild.innerHTML = hd[1];
},
// private
insertRows : function(dm, firstRow, lastRow, isUpdate) {
if (firstRow === 0 && lastRow == dm.getCount()-1) {
this.refresh();
} else {
if (!isUpdate) {
this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
}
var html = this.renderRows(firstRow, lastRow);

var before = this.getRow(firstRow);
if (before) {
Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);
} else {
Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);
}

var beforeLocked = this.getLockedRow(firstRow);
if (beforeLocked) {
Ext.DomHelper.insertHtml('beforeBegin', beforeLocked, html[1]);
} else {
Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);
}
if (!isUpdate) {
this.fireEvent("rowsinserted", this, firstRow, lastRow);
this.processRows(firstRow);
}
}
},
// private
removeRow : function(row) {
Ext.removeNode(this.getRow(row));
if (this.cm.getLockedCount() > 0) {
Ext.removeNode(this.getLockedRow(row));
}
},

getColumnData : function() {
var cs = [], cm = this.cm, colCount = cm.getColumnCount();
for (var i = 0; i < colCount; i++) {
var name = cm.getDataIndex(i);
cs[i] = {
name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name),
renderer : cm.getRenderer(i),
id : cm.getColumnId(i),
style : this.getColumnStyle(i),
locked : cm.isLocked(i)
};
}
return cs;
},

renderBody : function() {
var markup = this.renderRows();
return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})];
},

refresh : function(headersToo) {
this.fireEvent("beforerefresh", this);
this.grid.stopEditing();

var result = this.renderBody();
this.mainBody.update(result[0]);
this.lockedBody.update(result[1]);

if (headersToo === true) {
this.updateHeaders();
this.updateHeaderSortState();
}
this.processRows(0, true);
this.layout();
this.applyEmptyText();
this.fireEvent("refresh", this);
},

handleLockChange : function() {
this.refresh(true);
},

onDenyColumnHide : function() {

},

onColumnLock : function() {
this.handleLockChange.apply(this, arguments);
},

addRowClass : function(row, cls) {
var r = this.getRow(row);
if (r) {
this.fly(r).addClass(cls);
r = this.getLockedRow(row);
this.fly(r).addClass(cls);
}
},

removeRowClass : function(row, cls) {
var r = this.getRow(row);
if (r) {
this.fly(r).removeClass(cls);
r = this.getLockedRow(row);
this.fly(r).removeClass(cls);
}
},

handleHdMenuClick : function(item) {
var index = this.hdCtxIndex;
var cm = this.cm, ds = this.ds;
switch (item.id) {
case "asc":
ds.sort(cm.getDataIndex(index), "ASC");
break;
case "desc":
ds.sort(cm.getDataIndex(index), "DESC");
break;
case "lock":
var lc = cm.getLockedCount();
if (cm.getColumnCount(true) <= lc+1) {
this.onDenyColumnLock();
return;
}
if (lc != index) {
cm.setLocked(index, true, true);
cm.moveColumn(index, lc);
this.grid.fireEvent("columnmove", index, lc);
} else {
cm.setLocked(index, true);
}
this.changeHeight();
break;
case "unlock":
var lc = cm.getLockedCount();
if ((lc-1) != index) {
cm.setLocked(index, false, true);
cm.moveColumn(index, lc-1);
this.grid.fireEvent("columnmove", index, lc-1);
} else {
cm.setLocked(index, false);
}
this.changeHeight();
break;
default:
index = cm.getIndexById(item.id.substr(4));
if (index != -1) {
if (item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1) {
this.onDenyColumnHide();
return false;
}
cm.setHidden(index, item.checked);
}
}
return true;
},

handleHdDown : function(e, t) {
if (Ext.fly(t).hasClass('x-grid3-hd-btn')) {
e.stopEvent();
var hd = this.findHeaderCell(t);
Ext.fly(hd).addClass('x-grid3-hd-menu-open');
var index = this.getCellIndex(hd);
this.hdCtxIndex = index;
var ms = this.hmenu.items, cm = this.cm;
ms.get("asc").setDisabled(!cm.isSortable(index));
ms.get("desc").setDisabled(!cm.isSortable(index));
if (this.grid.enableColLock !== false) {
ms.get("lock").setDisabled(cm.isLocked(index));
ms.get("unlock").setDisabled(!cm.isLocked(index));
}
this.hmenu.on("hide", function() {
Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
}, this, {single:true});
this.hmenu.show(t, "tl-bl?");
}
}
});

Ext.grid.LockingColumnModel = function(config) {
Ext.grid.LockingColumnModel.superclass.constructor.call(this, config);
};

Ext.extend(Ext.grid.LockingColumnModel, Ext.grid.ColumnModel, {
getTotalLockedWidth : function() {
var totalWidth = 0;
for (var i = 0; i < this.config.length; i++) {
if (this.isLocked(i) && !this.isHidden(i)) {
totalWidth += this.getColumnWidth(i);
}
}
return totalWidth;
}
});

sanjshah
7 Mar 2008, 10:17 AM
Hi,

Thanks for your update, is it possible to apply the locking to grouped grid (I tried but not being able to)?

Regards,

Sanj

rmesser
7 Mar 2008, 1:03 PM
Thanks for the update huixjan. However, there are still some significant problems with the locking grid in firefox in particular. Here's my sample link, I updated it to use your new version of columnLock.js:
http://64.209.140.177/javascript/reports/examples/locking_grid.html

The initial sizing problem is easy enough to work around, but also the columns don't allow you to resize widths in firefox. Seems to work fine in IE again.

Air_Mike
12 Mar 2008, 3:04 AM
Hi,

this extension is great and very useful, but I have one question about it. How can I make it
work with GroupHeader plugin. When I use GridPanel with GroupHeader plugin it all works well, but when I use LockingGridPanel headers dissapears...

Thank You...

huixjan
13 Mar 2008, 6:44 PM
I just change few buggs when I was using it.I didn't add any fetures. Here is my changes.

Thanks for everybody.

Kevin.Tan
18 Mar 2008, 11:49 AM
It's great, Thanks.

Kevin.Tan
18 Mar 2008, 5:01 PM
If I use "new Ext.grid.CheckboxSelectionModel({locked:true});", the checkbox column cann't be locked.

xavierg
19 Mar 2008, 2:34 PM
question..
how I can align the locked column to the right of the grid???

by the way, this is awesome!!!! :D

Kevin.Tan
20 Mar 2008, 7:55 PM
Sometimes I'll get an error when select row, if I use LockGridPane.
The reason is the red code, sometimes it return undefined.

Please help to take a look.
Thanks,
Kevin

processEvent : function(name, e){
this.fireEvent(name, e);
var t = e.getTarget();
var v = this.view;
var header = v.findHeaderIndex(t);
if(header !== false){
this.fireEvent("header" + name, this, header, e);
}else{
var row = v.findRowIndex(t);
var cell = v.findCellIndex(t);
if(row !== false){
this.fireEvent("row" + name, this, row, e);
if(cell !== false){
this.fireEvent("cell" + name, this, row, cell, e);
}
}
}
},

tahlon
25 Mar 2008, 7:06 AM
How can I make it work with GroupHeader plugin. When I use GridPanel with GroupHeader plugin it all works well, but when I use LockingGridPanel headers dissapears...
Same here :/

rarerules
25 Mar 2008, 1:46 PM
Does this work with editor grids?

Also has anyone done a performance analysis to see what the implications of using column locking in ext2 are?

lickui
25 Mar 2008, 10:06 PM
Hi,thanks for your best job!

now,if my ColumnModel's first colum is a CheckboxSelectionModel,how can i lock this CheckboxSelectionModel?

such as:

var column = [
new Ext.grid.CheckboxSelectionModel(),
{
id: 'test1',
header: 'test1',
dataIndex: 'test1',
align: 'center',
sortable:true,
locked:true
},
{
id: 'test2',
header: 'test'2,
dataIndex: 'test2',
align: 'center',
sortable:true
}
]

cblin
1 Apr 2008, 7:15 AM
Hi,

I'd like an answer about the unanswered questions of this thread :
1. is it possible to use the extension in a GridEditorPanel (instead of a GridPanel)
2. how to lock the checkbox column of the CheckboxSelectionModel
3. how to make it work with GroupHeader
4. is there any problem with Grouping

cblin
1 Apr 2008, 7:15 AM
1. is it possible to use the extension in a GridEditorPanel (instead of a GridPanel)


simply add the following into columnLock.js :

Ext.grid.LockingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
getView : function(){
if(!this.view){
console.log('LockingGridView instanciation');
this.view = new Ext.grid.LockingGridView(this.viewConfig);
}
return this.view;
},
initComponent : function(){
if(!this.cm) {
console.log('LockingColumnModel instanciation');
this.cm = new Ext.grid.LockingColumnModel(this.columns);
delete this.columns;
}
Ext.grid.LockingEditorGridPanel.superclass.initComponent.call(this);
}
});

and do

new Ext.grid.LockingEditorGridPanel({/*usual params of a grideditor*/})

cblin
2 Apr 2008, 1:15 AM
if you have a DOCTYPE in your page
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

then this component does not work.

here is the patch to apply


Index: D:/t3-project/t3-frontend/web/lib/ext.ux/ColumnLock/Ext.ux.ColumnLock.js
===================================================================
--- D:/t3-project/t3-frontend/web/lib/ext.ux/ColumnLock/Ext.ux.ColumnLock.js (revision 3326)
+++ D:/t3-project/t3-frontend/web/lib/ext.ux/ColumnLock/Ext.ux.ColumnLock.js (working copy)
@@ -17,14 +17,12 @@
Ext.grid.LockingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
getView : function(){
if(!this.view){
- console.log('LockingGridView instanciation');
this.view = new Ext.grid.LockingGridView(this.viewConfig);
}
return this.view;
},
initComponent : function(){
if(!this.cm) {
- console.log('LockingColumnModel instanciation');
this.cm = new Ext.grid.LockingColumnModel(this.columns);
delete this.columns;
}
@@ -186,29 +184,29 @@
ws[i] = this.getColumnWidth(i);
}

- this.innerHd.firstChild.firstChild.style.width = tw - lw;
- this.mainWrap.dom.style.left = lw;
- this.lockedInnerHd.firstChild.firstChild.style.width = lw;
+ this.innerHd.firstChild.firstChild.style.width = (tw - lw) + 'px';
+ this.mainWrap.dom.style.left = lw + 'px';
+ this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';

for(var i = 0; i < clen; i++){
var hd = this.getHeaderCell(i);
- hd.style.width = ws[i];
+ hd.style.width = ws[i] + 'px';
}

var ns = this.getRows();
var lns = this.getLockedRows();
for(var i = 0, len = ns.length; i < len; i++){
- ns[i].style.width = tw - lw;
- ns[i].firstChild.style.width = tw-lw;
- lns[i].style.width = lw;
- lns[i].firstChild.style.width = lw;
+ ns[i].style.width = (tw - lw) + 'px';
+ ns[i].firstChild.style.width = (tw-lw) + 'px';
+ lns[i].style.width = lw + 'px';
+ lns[i].firstChild.style.width = lw + 'px';
for(var j = 0; j < lclen; j++){
var row = lns[i].firstChild.rows[0];
- row.childNodes[j].style.width = ws[j];
+ row.childNodes[j].style.width = ws[j] + 'px';
}
for(var j = lclen; j < clen; j++){
var row = ns[i].firstChild.rows[0];
- row.childNodes[j].style.width = ws[j];
+ row.childNodes[j].style.width = ws[j] + 'px';
}
}

@@ -222,25 +220,25 @@
var lw = this.cm.getTotalLockedWidth();

var hd = this.getHeaderCell(col);
- hd.style.width = w;
+ hd.style.width = w + 'px';

var ns, gw;
if(col < lclen) {
ns = this.getLockedRows();
gw = lw;
- this.lockedInnerHd.firstChild.firstChild.style.width = gw;
- this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth();
+ this.lockedInnerHd.firstChild.firstChild.style.width = gw + 'px';
+ this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
}else {
ns = this.getRows();
gw = tw - lw;
col -= lclen;
- this.innerHd.firstChild.firstChild.style.width = gw;
+ this.innerHd.firstChild.firstChild.style.width = gw + 'px';
}

for(var i = 0, len = ns.length; i < len; i++){
- ns[i].style.width = gw;
- ns[i].firstChild.style.width = gw;
- ns[i].firstChild.rows[0].childNodes[col].style.width = w;
+ ns[i].style.width = gw + 'px';
+ ns[i].firstChild.style.width = gw + 'px';
+ ns[i].firstChild.rows[0].childNodes[col].style.width = w + 'px';
}

this.onColumnWidthUpdated(col, w, tw);
@@ -252,7 +250,7 @@
var lw = this.cm.getTotalLockedWidth();
var lclen = this.cm.getLockedCount();

- this.innerHd.firstChild.firstChild.style.width = tw;
+ this.innerHd.firstChild.firstChild.style.width = tw + 'px';

var display = hidden ? 'none' : '';

@@ -263,18 +261,18 @@
if(col < lclen) {
ns = this.getLockedRows();
gw = lw;
- this.lockedHd.dom.firstChild.firstChild.style.width = gw;
- this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth();
+ this.lockedHd.dom.firstChild.firstChild.style.width = gw + 'px';
+ this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
} else {
ns = this.getRows();
gw = tw - lw;
col -= lclen;
- this.innerHd.firstChild.firstChild.style.width = gw;
+ this.innerHd.firstChild.firstChild.style.width = gw + 'px';
}

for(var i = 0, len = ns.length; i < len; i++){
- ns[i].style.width = gw;
- ns[i].firstChild.style.width = gw;
+ ns[i].style.width = gw + 'px';
+ ns[i].firstChild.style.width = gw + 'px';
ns[i].firstChild.rows[0].childNodes[col].style.display = display;
}

@@ -290,7 +288,7 @@
var lw = this.cm.getTotalLockedWidth();
var clen = this.cm.getColumnCount();
var lclen = this.cm.getLockedCount();
- var tstyle = 'width:'+this.getTotalWidth()+';';
+ var tstyle = 'width:'+this.getTotalWidth()+'px;';
var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {tstyle: tstyle}, r;
for(var j = 0, len = rs.length; j < len; j++){
r = rs[j]; cb = []; lcb = [];
@@ -325,18 +323,17 @@

rp.alt = alt.join(" ");
rp.cells = lcb.join("");
- rp.tstyle = 'width:'+lw+';';
+ rp.tstyle = 'width:'+lw+'px;';
lbuf[lbuf.length] = rt.apply(rp);

rp.cells = cb.join("");
- rp.tstyle = 'width:'+(tw-lw)+';';
+ rp.tstyle = 'width:'+(tw-lw)+'px;';
buf[buf.length] = rt.apply(rp);
}
return [buf.join(""), lbuf.join("")];
},

renderUI : function(){
-
var header = this.renderHeaders();
var body = this.templates.body.apply({rows:''});

@@ -368,7 +365,7 @@
this.lockedHd.on("mouseover", this.handleHdOver, this);
this.lockedHd.on("mouseout", this.handleHdOut, this);
this.lockedHd.on("mousemove", this.handleHdMove, this);
- this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth();
+ this.mainWrap.dom.style.left = this.cm.getTotalLockedWidth() + 'px';
this.scroller.on('scroll', this.syncScroll, this);
if(g.enableColumnResize !== false){
this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.lockedHd.dom);
@@ -482,8 +479,8 @@
cb[cb.length] = ct.apply(p);
}
}
- return [ts.header.apply({cells: cb.join(""), tstyle:'width:'+(tw-lw)+';'}),
- ts.header.apply({cells: lb.join(""), tstyle:'width:'+(lw)+';'})];
+ return [ts.header.apply({cells: cb.join(""), tstyle:'width:'+(tw-lw)+'px;'}),
+ ts.header.apply({cells: lb.join(""), tstyle:'width:'+(lw)+'px;'})];
},

updateHeaders : function(){

NotChris
4 Apr 2008, 9:08 AM
I incorporated this great add-in about three weeks ago and I am having the following problems in firefox:

1) The column header sizes cannot be adjusted.
2) The column headers are off in position from what they should be. The last column header is not visible at all.

Have these problems been fixed with any of the code updates that have been posted in this thread? I had originally grabbed the zipped file at the beginning of this thread. Both of these work fine in IE.

Thank you.

NotChris
5 Apr 2008, 4:14 PM
Bump.

Anyone know if the issues I have mentioned have been fixed with any of the code updates in this thread? Thanks.

MeDavid
6 Apr 2008, 8:59 AM
I incorporated most fixes in this thread. If there are still issues left, let me know. I haven't looked at the groupheader extension and the locking columns will not work with the groupinggrid, as it has a whole different layout.

See the first post for futher information about the update.

NotChris
6 Apr 2008, 12:43 PM
I just grabbed your latest zipped file and both issues I was seeing in FF have been fixed. Thank you.

gaspard
9 Apr 2008, 12:35 AM
I have download your updated version, and run columnLock.html, but it doesn't work, it seems that it don't have any css reference, where should i put the files in??

MeDavid
9 Apr 2008, 5:01 AM
You can put the extracted file in the your /extjs/examples/grid directory for example, or change the paths ofcourse.

ravindra.tiwary1
9 Apr 2008, 5:03 AM
hi i am using LockingGridPanel and using MultiCellSelectionModel as sm.
When scrollbar is moved, i.e. if it is not at first position,the locked column is not getting resized. only column header is expanding.
its working fine if scrollbar is at starting position.
i have locked only first column..

MeDavid
9 Apr 2008, 5:14 AM
I don't understand the issue. Do you have an online example?

ravindra.tiwary1
10 Apr 2008, 12:52 AM
yes, in same exmple u have attached with locking Grid. After analysing i found that, once u r scrolled to left(horizontal scrolling), resizing of locked column is not working. for resizing locked column scroller should be at begining position.Can't we fix this issue?

ygl
15 Apr 2008, 11:24 PM
hi ,thanks .
i am using Ext.grid.LockingEditorGridPanel
and
added the following into columnLock.js




getEditorParent : function(ed){
//return this.scroller.dom;
return this.el.dom;
},

refreshRow : function(record){
var ds = this.ds, index;
if(typeof record == 'number'){
index = record;
record = ds.getAt(index);
}else{
index = ds.indexOf(record);
}
var cls = [];
this.insertRows(ds, index, index, true);
this.getRow(index).rowIndex = index;
this.getLockedRow(index).rowIndex = index;
this.onRemove(ds, record, index+1, true);
this.fireEvent("rowupdated", this, index, record);
},

cjqcjq2008
18 Apr 2008, 1:51 AM
Hi,everyone

How to make horizontal scroll bar align to the leftmost of grid, other than align to the rightmost of locked column?

wsn24x7
5 May 2008, 10:34 PM
After I add the following code in columnLock.js, my editor grid panel (now LockingEditorGridPanel) doesn't show any columns.


Ext.grid.LockingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
getView : function(){
if(!this.view){
console.log('LockingGridView instanciation');
this.view = new Ext.grid.LockingGridView(this.viewConfig);
}
return this.view;
},
initComponent : function(){
if(!this.cm) {
console.log('LockingColumnModel instanciation');
this.cm = new Ext.grid.LockingColumnModel(this.columns);
delete this.columns;
}
Ext.grid.LockingEditorGridPanel.superclass.initComponent.call(this);
}
});Any idea???

deltron0
8 May 2008, 9:15 AM
i am using the locking column grid to display search results. when a new search is performed, the grid's store is cleared and new records are added. i have run into two issues related to scrolling using this grid:



vertical scrolling (FF/IE): select a row when the scroller is not at the top position, clear the grid and add rows. if the new row count is less than the old row count, the scrollbar/mainBody of the view reflect the size of the old data set, which is larger than the size of the lockedBody. the result is that mainBody can scroll beyond the lockedBody.
horizontal scrolling (IE): scroll to the right and clear the grid. the scrolled column headers to not reset to displaying the first non-locked column, but the scoller position resets. if rows are added, the cells and column headers are not aligned.



setting the top style attribute of the view's focusEl to 1px when clearing the grid seems to resolve the first problem. the second problem is resolved by calling Store.loadRecords instead of Store.add.

any help would be appreciated.

modified columnLockExample.js


/*
* Ext JS Library 2.0 RC 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create record
var DataRecord = Ext.data.Record.create([
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float', width:'100'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.LockingGridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 200, sortable: true, locked:true, dataIndex: 'company'},
{header: "Price", width:200, sortable: true, locked:true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 100, 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,
autoScroll: true,
title:'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();

function clearGrid() {
grid.store.removeAll();
// fixes first problem
// grid.view.focusEl.setStyle('top', '1px');
}

function addRows() {
var rows = Math.floor(myData.length*Math.random()) + 1;
var data = myData.slice(0, rows);
for (var i = 0, j = data.length; i < j; i++) {
var r = new DataRecord({
company: data[i][0],
price: data[i][1],
change: data[i][2],
pctChange: data[i][3],
lastChange: data[i][4]
});
grid.store.add(r);
// fixes second problem
// grid.store.loadRecords({records: [r]}, {add: true}, true);
}
}

new Ext.Button({
text: 'Clear Grid',
handler: clearGrid
}).render(document.body, 'grid-example');

new Ext.Button({
text: 'Add Rows',
handler: addRows
}).render(document.body, 'grid-example')
});

sachin_248
9 May 2008, 5:37 AM
The one big missing feature from extjs1.x not available in extjs2 is locked columns for the grid. As we needed the locked column feature for our customers, I made an initial port to extjs2.

Instead of using Ext.grid.GridPanel you should use Ext.grid.LockingGridPanel or for an editorgrid Ext.grid.LockingEditorGridPanel.

To use it with the checkboxSelectionModel:


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


[Update 1]

Fixed scrollsync error
Row highlighting
[Update 2]

Allow to define a LockingContentModel at config time, instead of the columns array
Minor rendering issue
[Update 3]

Finally fixed the resizing of locked columns
Highlighting / selecting rows from the locked column now works correctly
[Update 4]

Fixed issue with locked autoExpand column in FF
Incorporated various fixes in this thread, Thanks to cblin, huixjan, lesul and rmesser
Included example files

After downloading "grid column lock update 4.zip (http://extjs.com/forum/attachment.php?attachmentid=5915&d=1207500956)" I am not able to explore it.Getting a message that file is curropted.Please let me know that is there any problem with zip file.

wm003
9 May 2008, 8:24 AM
After downloading "grid column lock update 4.zip (http://extjs.com/forum/attachment.php?attachmentid=5915&d=1207500956)" I am not able to explore it.Getting a message that file is curropted.Please let me know that is there any problem with zip file.

:-?mmh, i can dowload the zip file and explore it just fine..maybe it got fixed or you may check you environment.

mogen9999
12 May 2008, 6:41 PM
The one big missing feature from extjs1.x not available in extjs2 is locked columns for the grid. As we needed the locked column feature for our customers, I made an initial port to extjs2.

Instead of using Ext.grid.GridPanel you should use Ext.grid.LockingGridPanel or for an editorgrid Ext.grid.LockingEditorGridPanel.

To use it with the checkboxSelectionModel:


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


[Update 1]

Fixed scrollsync error
Row highlighting
[Update 2]

Allow to define a LockingContentModel at config time, instead of the columns array
Minor rendering issue
[Update 3]

Finally fixed the resizing of locked columns
Highlighting / selecting rows from the locked column now works correctly
[Update 4]

Fixed issue with locked autoExpand column in FF
Incorporated various fixes in this thread, Thanks to cblin, huixjan, lesul and rmesser
Included example files
very good!

mogen9999
12 May 2008, 6:44 PM
i am using the locking column grid to display search results. when a new search is performed, the grid's store is cleared and new records are added. i have run into two issues related to scrolling using this grid:


vertical scrolling (FF/IE): select a row when the scroller is not at the top position, clear the grid and add rows. if the new row count is less than the old row count, the scrollbar/mainBody of the view reflect the size of the old data set, which is larger than the size of the lockedBody. the result is that mainBody can scroll beyond the lockedBody.
horizontal scrolling (IE): scroll to the right and clear the grid. the scrolled column headers to not reset to displaying the first non-locked column, but the scoller position resets. if rows are added, the cells and column headers are not aligned.

setting the top style attribute of the view's focusEl to 1px when clearing the grid seems to resolve the first problem. the second problem is resolved by calling Store.loadRecords instead of Store.add.

any help would be appreciated.

modified columnLockExample.js


/*
* Ext JS Library 2.0 RC 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create record
var DataRecord = Ext.data.Record.create([
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float', width:'100'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.LockingGridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 200, sortable: true, locked:true, dataIndex: 'company'},
{header: "Price", width:200, sortable: true, locked:true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 100, 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,
autoScroll: true,
title:'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();

function clearGrid() {
grid.store.removeAll();
// fixes first problem
// grid.view.focusEl.setStyle('top', '1px');
}

function addRows() {
var rows = Math.floor(myData.length*Math.random()) + 1;
var data = myData.slice(0, rows);
for (var i = 0, j = data.length; i < j; i++) {
var r = new DataRecord({
company: data[i][0],
price: data[i][1],
change: data[i][2],
pctChange: data[i][3],
lastChange: data[i][4]
});
grid.store.add(r);
// fixes second problem
// grid.store.loadRecords({records: [r]}, {add: true}, true);
}
}

new Ext.Button({
text: 'Clear Grid',
handler: clearGrid
}).render(document.body, 'grid-example');

new Ext.Button({
text: 'Add Rows',
handler: addRows
}).render(document.body, 'grid-example')
});

very good

Fabyo
21 May 2008, 6:27 AM
It does not work that plugin, basing this example

http://extjs.com/deploy/dev/examples/grid/totals.html

I'd like to use "grid width locking" + "Group Summary Plugin"

thanks

border9
27 May 2008, 4:55 AM
The Zip is curupted, when i download it i get a bunch of curupted data, ive tried 3 diffrent times, im downloading this with windows xp x64 SP2


Thanks could really use the updated version.

RobinOuyang
9 Jun 2008, 10:32 PM
i use a checkboxselectionmodel sm in lockingeditorgridpanel,and set sm.locked=true, It is locked, but cannot be checked.
My Ext version is 2.1.

Fabyo
10 Jun 2008, 9:15 AM
Someone could develop a version of this plugin to work with grouping

example grouping.js

thanks

tmaung
17 Jun 2008, 12:57 PM
I have found an error in the grid when the column sizes are very large. The total size the column can handle is 10000 (lock column widths + reg column widths). I have attached a jsp file but it can easily be changed for any other languages. i am just using a for loop to create the extra columns. Change the value from 64 to 63 and you will see that the last column header "Last Updated" shows up. But it does not show up with the value being 64. The data grid shows up however.

The math: 63*150 + 500 = 9950 (works fine)
The flipside: 64*150 + 500 = 10100 (does not work)

I have tried changing the width of the grid and it doesn't work. I will dissect the code a little and figure out where this value lies. In the meantime, if anyone has found the solution please let me know. Thanks in advance.

faraway
18 Jun 2008, 5:57 AM
i use a checkboxselectionmodel sm in lockingeditorgridpanel,and set sm.locked=true, It is locked, but cannot be checked.
My Ext version is 2.1.


I have almost the same problem... I use the CheckboxSelectionModel with LockingGridPanel, set the sm.locked = true. It's locking the column but locks also the selection(selections cannot be made). Is there any solution to fix this problem? If anyone knows how to solve this issue, please help me.
I'm using Ext v2.1 and the following code (it's the sample with few minor changes):


/*
* Ext JS Library 2.0 RC 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float', width:'100'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

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

// create the Grid
var grid = new Ext.grid.LockingGridPanel({
store: store,
columns: [
sm,
{id:'company',header: "Company", width: 40, sortable: true, locked:true, dataIndex: 'company'},
{header: "Price", width:40, sortable: true, locked:true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 100, 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'}
],
sm:sm,
stripeRows: true,
height:350,
width:500,
title:'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();
});
Thank you in advance.

sircyaj
27 Jun 2008, 2:50 AM
Thanks for codes. I was able to make it work. It really satisfies my requirement.
God Bless! :)

Raz_
4 Jul 2008, 6:02 AM
Hi, i'm trying to use the LockingEditorGridPanel and your example works. Only i noticed that if you define a columnModel and pass it in the grid constructor, instead of defining the param "columns" on the fly, the grid gets an error and doesn't render... does anybody else have ever experienced something similiar?

Thank you for your attention

[EDIT] My fault: i was using a columnModel instead of LockingColumnModel... ty anyway

milou
7 Jul 2008, 4:04 AM
FYI,

I found a bug : you can't lock all columns.
On the last lock action, Firebug log a JS error:

this.onDenyColumnLock is not a function columnLock.js (line 650)
this.onDenyColumnLock();


I found your extension very useful, but I've got another question about LockingGridPanel:
does it work with page switching, remote data and XML format ? :-?

srikanthnukala
8 Jul 2008, 12:49 PM
Thanks a ton , this works great!

Raz_
10 Jul 2008, 6:17 AM
Hi, i have a new problem now (i always try to solve my problems on my own, i'm not waiting others to do the work for me)

I previously set my EditorGridPanel with the following config option to expand the columns if they didn't fill the grid:


viewConfig: {
autoFill:colModel.getTotalWidth(false)<750,
forceFit:colModel.getTotalWidth(false)<750
},Now this doesn't work with LockingEditorGridPanel and the grid rendering is messed up... is this a compatibility issue?

Just another question: is there any method i can call to dynamically lock or unlock columns? I think it should work with colModel.setConfig, but it's not very simple...

Thank you for the help.

JSRobbie
10 Jul 2008, 8:29 AM
A very usefull component, thank you for sharing your code.

sanjaykanteti
10 Jul 2008, 1:52 PM
i'm trying to use LockingEditorGridPanel and GroupingStore locking together, can anyone give me some example code, that does this.

Thanx in adv

Raz_
11 Jul 2008, 1:48 AM
I found some more bugs (hope they haven't been described yet):

- once that a record is modified in my LockingEditorGridPanel, you cannot select it anymore by clicking on the locked field, but it's selected if you click on an unlocked field

- if i doubleclick on a field in the locked column to modify it, the editor box doesn't appear, though if i digit something and then press enter the text has ben appended to the previous value of the cell (as if i had the cursor at the end of the line after the doubleclick)

I hope that the author of the code will fix this, because it's a very useful great work.
Thank you for your attention.

border9
14 Jul 2008, 1:14 AM
I have the same issue as faraway.

Example

var checkColumn6 = new Ext.grid.CheckColumn({
header: "Select",
width: 25
});

var sm6 = new Ext.grid.CheckboxSelectionModel({singleSelect:false, width : 22});
sm6.locked = true;

It locks it like its suppose to, but when i go to click on the check boxes nothing happens, they as well are locked. Is there a fix for this bug yet?

Thanks

border9
15 Jul 2008, 12:18 AM
Bump for help. Thanks

alvin
21 Jul 2008, 2:11 AM
Hi,

is there any sample for grouping.js with locking column features?

thx

ghutchens
21 Jul 2008, 8:19 AM
I am using the version 2.0.2 ExtJS grid and I am able to get the grid columns to lock. My problem is I have buttons in the locked columns and the locked and unlocked columns are not staying the same height. I tried enableRowHeightSync and it doesn't appear to be available. Is there anyone with a workaround for this problem? Thanks.

lokiofragnar
29 Jul 2008, 2:05 PM
[keep reading if you are experiencing the same, the problem is solved. Just have to make sure that you always include the stylesheet. Sorry!]

Hi All,

Since most of the posts are from people who have the LockingGridPanel working I realize that I am most likely making the mistakes here.

I am using Ext 2.1 under FF 2.0.0.16, I am using zip number 4, I have a gridpanel that is being fed with an XML feed. Once fed it looks like the grid-normal.jpg (nice and happy fully filled grid).

Then I change the GridPanel to a LockingGridPanel and the ColumnModel to a LockingColumnModel and it looks like the second attachment (grid-locked-but-no-columns.jpg). I have not yet locked any columns at that time.

I then lock a single column (the first). And I can see some data and it looks like this: (grid-locked-with-first-column.jpg).

Does anybody out see an obvious mistake in what I am doing. I seem to miss it. Any help will be greatly appreciated.

cheers,
Aad

Frankatron
30 Jul 2008, 8:17 AM
Is there an easy way to resize the locked grid? I added


var grid = new Ext.grid.LockingGridPanel({
store: storeLockedFields,
columns: headerColumns,
height:550,
width:965,
loadMask: true,
renderTo: 'locked-grid'
});
var resizer = new Ext.Resizable("locked-grid", {
handles: 's se e',
minWidth: 200,
minHeight: 100,
maxWidth: 1500,
maxHeight: 1100,
pinned: true
});
But now I also have to add a resizer.on('resize') event and call out all the divs in the locked grid that have a fixed width and/or height and adjust them with the event. Is there an easier way?

--------------------------------------------------------------------------

UPDATE:
I found a fix that works for me. Here is my code. It has some jquery methods [width() and height()] mixed in there since I'm using the jquery adapter.

Ext.onReady(function(){
var $docu = $(document);
var gridWidth = $docu.width() - 40;
var gridHeight = $docu.height() - 40;

var grid = new Ext.grid.LockingGridPanel({
store: storeLockedFields,
columns: headerColumns,
width:gridWidth,
height:gridHeight,
title:'Compare Users',
stripeRows: false,
renderTo: 'compare'
});

var windowWidth = Ext.lib.Dom.getViewWidth();
var windowHeight = Ext.lib.Dom.getViewHeight();
Ext.EventManager.onWindowResize(function(){
newWidth = Ext.lib.Dom.getViewWidth()
newHeight = Ext.lib.Dom.getViewHeight()
rzWidth = newWidth - windowWidth;
rzHeight = newHeight - windowHeight;

var box1 = Ext.get("compare").first();
var box3 = Ext.select("div.x-grid3-locked").first().parent();
var box2 = box3.parent();
var box4 = Ext.select("div.x-grid3-locked").first().last();
var box5 = Ext.select("div.x-grid3-viewport").first().last();

box1.setWidth(box1.getWidth() + rzWidth);
box2.setWidth(box2.getWidth() + rzWidth).setHeight(box2.getHeight() + rzHeight);
box3.setWidth(box3.getWidth() + rzWidth).setHeight(box3.getHeight() + rzHeight);
box4.setHeight(box4.getHeight() + rzHeight);
box5.setWidth(box5.getWidth() + rzWidth).setHeight(box5.getHeight() + rzHeight);

windowWidth = newWidth;
windowHeight = newHeight;
})
});

cooluser7
8 Aug 2008, 11:35 AM
I have a problem in this code, when i click on the locked column, after change the value on any column on the same row:

In the red line of this code, the firebug (FF) show this error: "row is undefined"

Please, somebody help-me! :D



...
getCell : function(rowIndex, colIndex) {
var locked = this.cm.getLockedCount();

var row;
if (colIndex < locked) {
row = this.getLockedRow(rowIndex);
} else {
row = this.getRow(rowIndex);
colIndex -= locked;
}
return row.getElementsByTagName('td')[colIndex];
},
...



In my tests, the rowIndex property is undefined...

crpatrick
12 Aug 2008, 11:26 AM
Hi all-

I saw some others had an issue with the .zip...is there any other location we may be able to download the zip for the locking column update from? I am also seeing a popup of an invalid zip archive when attempting to save/open the file.

Talk soon
Chris

crpatrick
12 Aug 2008, 11:36 AM
Hi again-

I am also seeing an issue with the locking column and extJS 2.2. I have an old version of columnLock.js, which is why I was trying to upgrade the library (to see if the issue below is resolved). Basically, the old locking column worked exactly as expected. When I did an upgrade to extJS 2.2, I first got a JScript error indicating that lrow had now properties on row 146....I caught the exception to avoid the JScript error. Another error I am seeing is that the grid seems to lock, but if I had 10 rows of data, with the first column locked by default, suddenly, I am seeing the data from the first/locked row repeated in the second row, after the original chunk of ten rows. Any ideas?

Thanks in advance for any help.

NeonMonk
12 Aug 2008, 8:12 PM
Concur with previous message. 2.2 update seems to break columnLock

NeonMonk
12 Aug 2008, 10:00 PM
Ok quick fix. Which may actually break other stuff (but it seems to be working no problems for me at this point in time. YMMV

If you're still running into issues I can't help you, as I said, this is a quick fix!

Simply replace columnLock.js with attached file.

For anyone who is interested, the gridview function that was causing issues was afterRender... All I've done was added it to the columnLock extension, and commented out the contents of afterRender.

As I said this is a dirty unresearched quickfix. Use at your own risk!

duverma
13 Aug 2008, 1:41 PM
hi,
i am not able to open the zip. it says that it is not valid archive file. pls upload again.
thx,
duverma

hawks2001
17 Aug 2008, 5:40 PM
my download file did not open

NeonMonk
17 Aug 2008, 6:32 PM
Odd, I've replaced the file; Try downloading again.

Angelina
19 Aug 2008, 11:38 PM
Hi cooluser7,

Concerning your problem:
Problem when change values in LockingEditorGridPanel

Hi have a similar problem and the following code seems to correct the problem.
I added this function to the columnLock.js


refreshRow : function(record){
var ds = this.ds, index;
if(typeof record == 'number'){
index = record;
record = ds.getAt(index);
}else{
index = ds.indexOf(record);
}
var cls = [];
this.insertRows(ds, index, index, true);
this.getRow(index).rowIndex = index;
this.getLockedRow(index).rowIndex = index;
this.onRemove(ds, record, index+1, true);
this.fireEvent("rowupdated", this, index, record);
}

tinnt
28 Aug 2008, 8:02 PM
Hello all,

I try grid column lock update 4.zip and i have some issues with new locking grid update.
Your example-array grid with locked column seem work well, but when I use locking grid in my project, i have some problem with it. My grid have many columns (120-150). So if the number of columns is so large (120), the grid data and the columns header are not linning up. See my attached pictures for more detail.

Sorry for my English, Can someone help me? Thank so much :).

God bless.

galdaka
28 Aug 2008, 10:40 PM
1) Please attach a example that run Ok when you extract in EXT JS distribution folder.

2) I change path

tinnt
28 Aug 2008, 11:05 PM
[QUOTE=galdaka;216020]1) Please attach a example that run Ok when you extract in EXT JS distribution folder.

2) I change path

Frankatron
29 Aug 2008, 9:46 AM
I'm having an issue with showing and hiding columns that is easily reproducible but I can't seem to figure out how to fix the behavior.

Using the example file, I drag a column from the right side over to the left side. Then I use the drop down menu in the header to hide the column I just moved to the left side. The column and header are removed but it seems that the calculation for the header width is occurring based on that column's original position, in the right side headers.

Can someone please point me to the function that handles the header recalculation and what I might do to override that function?

Please see attached screen shots.

galdaka
30 Aug 2008, 4:26 AM
@galdaka, thanks for your quick reply :)

I send to you the example code i have edited. I have some issues with it.

Please, unzip this attached code, copy and paste 4 files into \ext-2.1\ext-2.1\examples\grid

Regards.

Sorry but not work in IE6. View in action: http://www.jadacosta.es/extjs/examples/columnlock/columnLock.html

Greetings,

tinnt
31 Aug 2008, 7:18 AM
Sorry but not work in IE6. View in action: http://www.jadacosta.es/extjs/examples/columnlock/columnLock.html

Greetings,

I test your link with IE6, it has some error with IE but it work normally, do not pay attention to this error, do not click on the grid cell, just move the bottom scrollbar to the rightmost, you will see the columns header and grid's data are not lining up, and i cannot see the rest of columns, I don't know what happen if the number of columns is so large (or does the LockingGrid class has some issue?). Can you show me?

Sorry for my English :). Thank you very much.

Bogdan Juszczak
1 Sep 2008, 5:33 AM
thanks for the plugin, highly usefull

question: is there any way to make it work with XGridPlugin (for spans in header)?
someone asked about it before, but I haven't found the answer...

cheers,
BJ

tinnt
3 Sep 2008, 12:55 AM
I test your link with IE6, it has some error with IE but it work normally, do not pay attention to this error, do not click on the grid cell, just move the bottom scrollbar to the rightmost, you will see the columns header and grid's data are not lining up, and i cannot see the rest of columns, I don't know what happen if the number of columns is so large (or does the LockingGrid class has some issue?). Can you show me?

Sorry for my English :). Thank you very much.

nobody answer my question?! why ext2.x not support locking grid?

Frankatron
3 Sep 2008, 6:19 AM
They redesigned the grid plugin for ext2.x and the locking grid was causing all kinds of performance issues. So to increase performance of the other grid types, mainly the editable grid, they decided to sacrifice the locking grid.

tinnt
3 Sep 2008, 6:19 PM
They redesigned the grid plugin for ext2.x and the locking grid was causing all kinds of performance issues. So to increase performance of the other grid types, mainly the editable grid, they decided to sacrifice the locking grid.

thank you. \:D/

nanich
4 Sep 2008, 12:19 PM
I have almost the same problem... I use the CheckboxSelectionModel with LockingGridPanel, set the sm.locked = true. It's locking the column but locks also the selection(selections cannot be made). Is there any solution to fix this problem? If anyone knows how to solve this issue, please help me.
I'm using Ext v2.1 and the following code (it's the sample with few minor changes):


/*
* Ext JS Library 2.0 RC 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float', width:'100'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

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

// create the Grid
var grid = new Ext.grid.LockingGridPanel({
store: store,
columns: [
sm,
{id:'company',header: "Company", width: 40, sortable: true, locked:true, dataIndex: 'company'},
{header: "Price", width:40, sortable: true, locked:true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 100, 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'}
],
sm:sm,
stripeRows: true,
height:350,
width:500,
title:'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();
});
Thank you in advance.


Please do this for fixing the problem of checkbox not getting selected once locked by setting the property "locked = true";


Ext.override(Ext.grid.ColumnModel{
isLocked :function(colIndex){
if(this.config[colIndex] instanceof Ext.grid.CheckboxSelectionModel){return true;}
return this.config[colIndex].locked === true;
}
});

xiespirit
4 Sep 2008, 11:55 PM
when I explore the example,I find some questions. Does anybody else have ever experienced something similiar?
Can you tell me how to resolve it ?Thanks a lot.

mmboy
5 Sep 2008, 12:58 AM
Thanks for sharing.
Wow, It's pretty cool!
I find it works fine with Ext JS 2.1. But can't work with Ext JS2.2.

See my attachment.

tinnt
6 Sep 2008, 1:58 AM
Thanks for sharing.
Wow, It's pretty cool!
I find it works fine with Ext JS 2.1. But can't work with Ext JS2.2.

See my attachment.

me too. Need to fix in ext2.2 :s

nanich
9 Sep 2008, 10:28 AM
Whenever I'm trying to use
viewConfig:{forceFit:true} for the locking grid panel. I cant even see the grid rendering on the screen. i'm getting "invalid argument" JS error and even if it got rendered, the whole resizing of the columns is getting screwed up.

Can anybody throw some ideas on this issue and help me in resolving it.
Thanks in advance.

priyanka_iknip
17 Sep 2008, 3:30 AM
Please let me know if there is any other way of locking the columns?

justinfalk
18 Sep 2008, 7:01 AM
Thanks for sharing.
Wow, It's pretty cool!
I find it works fine with Ext JS 2.1. But can't work with Ext JS2.2.

See my attachment.

Same here. Has anyone had any luck with a fix for Ext 2.2? Is this extension dead?

Thanks,

Justin

Nagiy
19 Sep 2008, 5:17 PM
I tried adding this line to columnLock.js
afterRender : function() { },
It seems to fix the 2.2 issue !

fmanrique
7 Oct 2008, 2:17 PM
Please do this for fixing the problem of checkbox not getting selected once locked by setting the property "locked = true";


Ext.override(Ext.grid.ColumnModel{
isLocked :function(colIndex){
if(this.config[colIndex] instanceof Ext.grid.CheckboxSelectionModel){return true;}
return this.config[colIndex].locked === true;
}
});



But where I put this code?.

My problem is that I can not edit fields (numericFields o combobox fields) in a locked columns editorGridPanel.

I think I can use the same code as suggesting, but not where I need to put it.

Thank you

sdileep
9 Oct 2008, 3:18 PM
Has anyone here attempted to merge this project's functionality with MaximGB's TreeGrid, or know how to proceed with this? Having the tree level frozen while scrolling horizontally would be hugely useful (Excel has similar functionality) but I'm guessing it would be somewhat involved.
https://extjs.com/forum/showthread.php?t=37831

fmanrique
14 Oct 2008, 3:06 PM
Hi !!!

I'm having a little truble with the locked columns in an EditorGridPanel (LockedEditorGridPanel).

For example, when I set an editor for a column, and then I lock that column, the editor doesn't show up.

I need to edit all the columns, including the locked ones.

Does any one have solved this issue?

Can any one point me where to look (in code) so I can resolve this problem?

Thanks in advance.

sham123456
15 Oct 2008, 9:14 PM
Hi,

grid column lock update 4.zip geting downlaod. but files not there.... plz help

durlabh
17 Oct 2008, 5:01 AM
Same here. Has anyone had any luck with a fix for Ext 2.2? Is this extension dead?

Thanks,

Justin

Bump!

digiprosoft
18 Oct 2008, 9:08 PM
See my quick implement from scratch:

Demo:
http://demoserver.digiprosoft.com/extjs/ext-2.2/digiprosoft/grid-locked-column/array-grid-locked-column.html.php

That still needs some improvement since I've spent only 1 night for it. I can adapt to TreeGrid however it needs make several changes.

Comments?

hanganum
20 Oct 2008, 6:55 AM
Cool! It works on 2.2. One small bug: when scrolling to the bottom, there's a difference in pixels between the first column and the rest. It's probably caused by the scroll bar which introduces some suplementary space - not taken into account.

akannu
21 Oct 2008, 12:34 PM
For the grid with frozen column if forcefit is set to false and the column width matches the grid width, I wonder if the left grid would get that extra space for horizontal scrollbar but not actually show it. It may solve the mismatch then scrolled down to the bottom.

digiprosoft
21 Oct 2008, 6:38 PM
I fixed that scroll for the left column:

http://demoserver.digiprosoft.com/extjs/ext-2.2/digiprosoft/grid-locked-column/array-grid-locked-column.html.php

Header resizing still in progress. Please tell me any other bugs.

Nagiy
22 Oct 2008, 9:27 AM
I fixed that scroll for the left column:

http://demoserver.digiprosoft.com/extjs/ext-2.2/digiprosoft/grid-locked-column/array-grid-locked-column.html.php

Header resizing still in progress. Please tell me any other bugs.

digiprosoft, your demo does not work on IE !

Nagiy
22 Oct 2008, 9:28 AM
I tried adding this line to columnLock.js
afterRender : function() { },
It seems to fix the 2.2 issue !

Has anyone tried this code to fix the 2.2 issue?

akannu
22 Oct 2008, 10:02 AM
Sorting is not working right on the demo you provided. Clicking on any column sorder only sorts the 'company' column in the non-frozen grid.

sureshraja.crt
22 Oct 2008, 2:21 PM
I have found an error in the grid when the column sizes are very large. The total size the column can handle is 10000 (lock column widths + reg column widths). I have attached a jsp file but it can easily be changed for any other languages. i am just using a for loop to create the extra columns. Change the value from 64 to 63 and you will see that the last column header "Last Updated" shows up. But it does not show up with the value being 64. The data grid shows up however.

The math: 63*150 + 500 = 9950 (works fine)
The flipside: 64*150 + 500 = 10100 (does not work)

I have tried changing the width of the grid and it doesn't work. I will dissect the code a little and figure out where this value lies. In the meantime, if anyone has found the solution please let me know. Thanks in advance.

any one help me how to implement column lock in dynamic grid

redzedi
22 Oct 2008, 8:52 PM
Hi All,
I am using LockingGridPanel.js along with LockingColumnModel for my project . Here are some issues I am facing :-

1. Ext.Grid.ColumnModel has a config parameter called "css" which as per the documentation accepts a css class name which is to be applied to all the data cells . But when i use this config parameter while creating an object of LockingColumnModel , it does not work at all as mentioned in API doc is this a bug for this extended class ??.

2.Is there a way to customize the mouse highlight colour for rows ??

Thanking all in anticipation.

akannu
23 Oct 2008, 10:17 AM
It looks like this thread was started for MeDavid's user extension for column locking.

Then I see digiprosoft suggesting his own implementation from scratch.

I think it is confusing as people are reporting issues...which one is being referred to.

Shmitt
25 Oct 2008, 4:06 AM
Is it possible to make that LockColumn plugin to work with groupSummary plugin ?!

Any examples will be great!

Thx in advance!

surgi
25 Oct 2008, 12:11 PM
Hello, I'm reffering to MeDavid's user extension for column locking (Ext.grid.LockingGridPanel and Ext.grid.LockingColumnModel).

I'm trying to get it working together with GroupHeaderPlugin ( http://extjs.com/forum/showthread.php?t=22337 ), using ExtJS 2.1 at the moment.

I can get each of the thingies working, but using both of them together I had no luck so far, I've also searched thru these forums, found noone addressing this issue.

My guess is that locking grid extension will need a lil tweaking in order to work with group headers (basic set up leads to
Error: this.lockedInnerHd.firstChild.firstChild.style has no properties - Line: 293, file columnLock.js). I've tried some tweaking myself (basically avoiding displayed errors, but it didnt work (result - nonsenses in headers)).

Can anyone please point me to the right direction? At the moment I have no clear idea what feature and where is missing in order to make locked columns work together with group headers.

Thanks in advance..

(Attached test-case-upd.zip contains example case of issue I'm reffering to. Should be placed at /ext-2.1/examples/any-directory/)

EDIT: As I've tried to look deeper into codes of both the plugin and the extension, I should point out that I don't need to have any group headers merging locked and unlocked columns (in another case it would complicate the solution badly due to the style lockingGrid is realized, I guess).

Condor
26 Oct 2008, 7:50 AM
While trying to help surgi with his GroupHeaderPlugin problem I found several problems with the current LockingGridView:

1. updateAllColumnWidths and updateColumnWidth call onAllColumnWidthsUpdated and onColumnWidthUpdated with the wrong column number for non-fixed columns.
2. Row rendering needs to be moved from renderUI to afterRender (for Ext 2.2 compatibility).
3. Row headers get out of sync when changing column width in quirks mode, because borders are included in the width.

Here is the fix:

Ext.override(Ext.grid.LockingGridView, {
renderUI : function(){
var header = this.renderHeaders();
var body = this.templates.body.apply({rows:''});
var html = this.templates.master.apply({
body: body,
header: header[0],
lockedBody: body,
lockedHeader: header[1]
});
var g = this.grid;
g.getGridEl().dom.innerHTML = html;
this.initElements();
Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
Ext.fly(this.lockedInnerHd).on("click", this.handleHdDown, this);
this.mainHd.on("mouseover", this.handleHdOver, this);
this.mainHd.on("mouseout", this.handleHdOut, this);
this.mainHd.on("mousemove", this.handleHdMove, this);
this.lockedHd.on("mouseover", this.handleHdOver, this);
this.lockedHd.on("mouseout", this.handleHdOut, this);
this.lockedHd.on("mousemove", this.handleHdMove, this);
this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
this.scroller.on('scroll', this.syncScroll, this);
if(g.enableColumnResize !== false){
this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.lockedHd.dom);
this.splitone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
this.splitone.setOuterHandleElId(Ext.id(this.mainHd.dom));
}
if(g.enableColumnMove){
this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
}
if(g.enableHdMenu !== false){
if(g.enableColumnHide !== false){
this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
this.colMenu.on("itemclick", this.handleHdMenuClick, this);
}
this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
this.hmenu.add(
{id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
{id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
);
if(this.grid.enableColLock !== false){
this.hmenu.add('-',
{id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
{id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
);
}
if(g.enableColumnHide !== false){
this.hmenu.add('-',
{id:"columns", text: this.columnsText, menu: this.colMenu, iconCls: 'x-cols-icon'}
);
}
this.hmenu.on("itemclick", this.handleHdMenuClick, this);
}
if(g.enableDragDrop || g.enableDrag){
var dd = new Ext.grid.GridDragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}
this.updateHeaderSortState();
},
afterRender : function(){
var bd = this.renderRows();
if (bd == '') bd = ['', ''];
this.mainBody.dom.innerHTML = bd[0];
this.lockedBody.dom.innerHTML = bd[1];
this.processRows(0, true);
if(this.deferEmptyText !== true){
this.applyEmptyText();
}
},
updateAllColumnWidths : function(){
var tw = this.cm.getTotalWidth();
var lw = this.cm.getTotalLockedWidth();
var clen = this.cm.getColumnCount();
var lclen = this.cm.getLockedCount();
var ws = [];
for(var i = 0; i < clen; i++){
ws[i] = this.getColumnWidth(i);
}
this.innerHd.firstChild.firstChild.style.width = (tw - lw) + 'px';
this.mainWrap.dom.style.left = lw + 'px';
this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
for(var i = 0; i < clen; i++){
var hd = this.getHeaderCell(i);
hd.style.width = ws[i] + 'px';
}
var ns = this.getRows();
var lns = this.getLockedRows();
for(var i = 0, len = ns.length; i < len; i++){
ns[i].style.width =(tw - lw) + 'px';
ns[i].firstChild.style.width = (tw-lw) + 'px';
lns[i].style.width = lw + 'px';
lns[i].firstChild.style.width = lw + 'px';
for(var j = 0; j < lclen; j++){
var row = lns[i].firstChild.rows[0];
row.childNodes[j].style.width = ws[j] + 'px';
}
for(var j = lclen; j < clen; j++){
var row = ns[i].firstChild.rows[0];
row.childNodes[j].style.width = ws[j] + 'px';
}
}
this.onAllColumnWidthsUpdated(ws, tw);
},
updateColumnWidth : function(col, width){
var w = this.getColumnWidth(col);
var tw = this.cm.getTotalWidth();
var lclen = this.cm.getLockedCount();
var lw = this.cm.getTotalLockedWidth();
var hd = this.getHeaderCell(col);
hd.style.width = w;
var ns, gw;
var ncol = col;
if(col < lclen) {
ns = this.getLockedRows();
gw = lw;
this.lockedInnerHd.firstChild.firstChild.style.width = gw + 'px';
this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
this.mainWrap.dom.style.display='none';
this.mainWrap.dom.style.display='';
}else {
ns = this.getRows();
gw = tw - lw;
ncol -= lclen;
this.innerHd.firstChild.firstChild.style.width = gw + 'px';
}
for(var i = 0, len = ns.length; i < len; i++){
ns[i].style.width = gw + 'px';
ns[i].firstChild.style.width = gw + 'px';
ns[i].firstChild.rows[0].childNodes[ncol].style.width = w;
}
this.onColumnWidthUpdated(col, w, tw);
this.layout();
}
});

Condor
26 Oct 2008, 7:53 AM
After applying the previous fixes you can use the following LockedGroupHeaderGrid plugin:


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

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

Ext.extend(Ext.ux.plugins.LockedGroupHeaderGrid, 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;
},

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.cm.getTotalWidth(), lw = this.cm.getTotalLockedWidth();
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;
var l = this.cm.isLocked(col) ? 1 : 0;
col += c.colspan;
var gs = this.getGroupStyle(c);
cells[l][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[0][i] = ts.header.apply({
tstyle: 'width:' + (tw - lw) + 'px;',
cells: cells[0].join('')
});
rows[1][i] = ts.header.apply({
tstyle: 'width:' + lw + 'px;',
cells: cells[1].join('')
});
}
var h = renderHeaders.call(this);
rows[0][rows.length] = h[0];
rows[1][rows.length] = h[1];
return [rows[0].join(''), rows[1].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'), this.lockedHd.query('.x-grid3-header-offset > table')], tw = this.cm.getTotalWidth(), lw = this.cm.getTotalLockedWidth();
for (var i = 0; i < tables[0].length; i++) {
tables[0][i].style.width = (tw - lw) + 'px';
tables[1][i].style.width = lw + 'px';
if (i < this.cm.rows.length) {
var cells = [], c = [tables[1][i].firstChild.firstChild.childNodes, tables[0][i].firstChild.firstChild.childNodes];
for (l = 0; l < 2; l++) {
for (j = 0; j < c[l].length; j++) {
cells.push(c[l][j]);
}
}
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){
var locked = this.cm.getLockedCount();
if(index < locked){
return this.lockedHd.query('td.x-grid3-cell')[index];
} else {
return this.mainHd.query('td.x-grid3-cell')[(index-locked)];
}
},

updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var clen = this.cm.getColumnCount();
var lclen = this.cm.getLockedCount();
var hds = this.mainHd.select('td.x-grid3-cell').removeClass(sc);
var lhds = this.lockedHd.select('td.x-grid3-cell').removeClass(sc);
if(lclen > 0 && col < lclen)
lhds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
else
hds.item(col-lclen).addClass(sc[dir == "DESC" ? 1 : 0]);
}
});

(see original GroupHeaderGrid plugin thread (http://extjs.com/forum/showthread.php?t=22337) for usage example)

surgi
26 Oct 2008, 8:36 AM
Hey Condor, thx for your effort!

Initialized it looks OK, but there are some issues with scrolling:
* horizontal: headers do not move when scrolled
* vertical: locked rows do not move along with unlocked

(see scrnshot)

I've extended columnLock.js with fix you've provided (simply pasted it under the original code), and used LockedGroupHeaderGrid from your post as well.

Errors I'm getting are

Error: this.syncHeaderScroll is not a function - File: /ext-2.1/ext-all-debug.js - Line 30082
after each scroll attempt.

I've tested it under Ext 2.1 and Ext 2.2 with similar results.

Condor
26 Oct 2008, 9:27 AM
Sorry, I left in some debug code by mistake. I've updated the original code, please try again...

surgi
26 Oct 2008, 9:50 AM
Thanks again, it works wonders now!

Nagiy
28 Oct 2008, 9:24 AM
Condor, Awesome work =D>

xbohdpukc
30 Oct 2008, 12:36 PM
I'm trying to build my grid dynamically (adding columns based on the data returned from the server) and getting the result shown in the screenshot. Any idea as to what I'm doing wrong is appreciated!



var storeCols = [{
name : 'id'
}, {
name : 'parentId'
}, {
name : 'name'
}, {
name : 'ord',
type : 'int'
}, {
name : 'calculated',
type : 'bool'
}, {
name : 'formula'
}, {
name : 'changePercent'
}, {
name : 'changeVolume'
}];

var gridCols = [{
dataIndex : 'name',
header : 'Name',
width : 80,
locked : true
}, {
dataIndex : 'changePercent',
header : 'Change %',
width : 60,
renderer: changeRenderer
}, {
dataIndex : 'changeVolume',
header : 'Bcf/d change',
width : 60,
renderer: changeRenderer
}];

var store = new Ext.data.SimpleStore({
fields : storeCols
});

var records = [];
for (var i = 0; i < data.length; i++) {
var recordConfig = {
id : data[i].id,
parentId : data[i].parentId,
name : data[i].name,
ord : data[i].ord,
calculated : data[i].calculated,
formula : data[i].formula,
changePercent : 0,
changeVolume : 0
};
for (var j = 0; j < data[i].data.length; j++) {
recordConfig["column_" + data[i].data[j].key.format("Ymd")] = data[i].data[j].value;
}
records.push(new Ext.data.Record(recordConfig));
}
store.add(records);

var grid = new Ext.grid.LockingEditorGridPanel({
store : store,
cm : new Ext.grid.LockingColumnModel(gridCols),
stripeRows : true
});

this.holderPanel.add(grid);
this.holderPanel.doLayout();

wwwtd
31 Oct 2008, 9:49 PM
hi everyone :

can some one fix the code with editorgridpanel to lock the row and colunm???

and with the totle summery??????you can count the row and colunm ?

there are some bugs used with this

MeDavid
1 Nov 2008, 3:47 AM
can some one fix the code with editorgridpanel to lock the row and colunm???

and with the totle summery??????you can count the row and colunm ?

there are some bugs used with this http://www.extjs.com/forum/showthread.php?t=21331

If you would like to see fixes at least give a detailed description of the problem.

I'm working on a new approach that will better support plugins (rowexpander, treegrid, summery etc.) and alternative grid(view)s like the groupinggrid. It's far from finished, but I'll post a preview in a few days.

greeeg
5 Nov 2008, 4:08 AM
Help,

I installed the last plugin version and I tested with include exemple : it works.
Now I'm trying to use a dynamic JSON loading, but my grid stay blank...

Here is my code (the JSON array is well filled !!) :

[code]
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

krmlmnstr
5 Nov 2008, 6:10 AM
Hi,

LockingEditorGridPanel comes already quite close to what I'm looking for! Thanks to everyone supporting this development!=D>

I have multi-line cells which initially rendered fine after having applyed ssmso's Part 1 fix back on page 2 of this thread. Unfortunately, the correct row height of locked columns is reset to default after updating a cell and rows get out of sync...

As a beginner I didn't succeed to figure out how to fix that...

Any help would be highly appreciated!

greeeg
6 Nov 2008, 6:59 AM
Up...

kastanis
10 Nov 2008, 2:18 AM
hello,

I'm trying to run example file.. I got ir from the first thread, file grid-column-lock-update-4.zip

But it somehow doesn't work


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Locking column example</title>

<link rel="stylesheet" type="text/css" href="columnLock.css" />
<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.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="columnLock.js"></script>


<script type="text/javascript" src="columnLockExample.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>Column Locking Example</h1>

<div id="grid-example"></div>
</body>
</html>





FireBug shows an error:
lrow is undefined
lrow.rowIndex = i;


see screenshot at Attachments


Any ideas ? :-?

Condor
10 Nov 2008, 2:34 AM
FireBug shows an error:
lrow is undefined
lrow.rowIndex = i;

Any ideas ? :-?

You need this patch (http://extjs.com/forum/showthread.php?p=243426#post243426) to make the extension compatible with Ext 2.2.

kastanis
10 Nov 2008, 4:57 AM
I may sound kind of stupid, but where do I have to put this patch?


You need this patch (http://extjs.com/forum/showthread.php?p=243426#post243426) to make the extension compatible with Ext 2.2.


to columnLock.js file or columnLockExample.js file?

I'm really new at ext js :">

Condor
10 Nov 2008, 6:43 AM
You should put it after columnLock.js (or you could replace the methods from the patch in the original columnLock.js).

kastanis
10 Nov 2008, 7:12 AM
thx, condor


worked fine, ur the best =D>

kastanis
12 Nov 2008, 2:35 AM
hi, again.....

I'm trying to use LockedGroupHeaderGrid plugin, but u can guess, it's not working... :s

Could some one tell or show how it should be used?

Condor
12 Nov 2008, 4:18 AM
I'm trying to use LockedGroupHeaderGrid plugin, but u can guess, it's not working... :s

What have you tried so far? Post your code.

kastanis
12 Nov 2008, 5:06 AM
Here are my codes

LockedGroupHeaderGridExample.html:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>LockedGroupHeaderGrid example</title>
<link rel="stylesheet" type="text/css" href="columnLock.css" />
<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.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="columnLock.js"></script>
<script type="text/javascript" src="columnLock_update.js"></script> <!-- given by u->>

<script type="text/javascript" src="LockedGroupHeaderGridplugin.js.js"></script> <!-- this is a code from here (http://extjs.com/forum/showthread.php?t=17942&page=14) -->
<script type="text/javascript" src="LockedGroupHeaderGridExample.js"></script>


<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<h1>LockedGroupHeaderGrid example</h1>

<div id="grid-example"></div>
</body>
</html>
LockedGroupHeaderGridExample.js :


Ext.onReady(function(){

var xg = Ext.grid;

var reader = new Ext.data.JsonReader({
idProperty:'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'}
]
});

var grid = new xg.LockingEditorGridPanel({
ds: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'rate', direction: "ASC"},
groupField:'project'
}),
columns: [
{header: "Description",id: 'description',locked:true,header: "Task", width: 80,sortable: true,dataIndex: 'description'},
{header: "Project",width: 20,sortable: true,dataIndex: 'project'},
{header: "Rate",width: 25,sortable: true,dataIndex: 'rate'},
{header: "Estimate",width: 20,sortable: true,dataIndex: 'estimate'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
//showGroupName: false,
enableNoGroups:false,
// hideGroupedColumn: true
}),
// plugins:LockedGroupHeaderGrid, <-- here firebug shows "LockedGroupHeaderGrid is not defined"
frame:true,
width: 800,
height: 450,
title: 'LockedGroupHeaderGrid example',
iconCls: 'icon-grid',
renderTo: document.body
});
});
Ext.grid.dummyProjects = [
{projectId: 100, project: 'aaa'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping'},
{projectId: 102, project: 'Ext Grid: Summary Rows'}
];
Ext.grid.dummyData = [
{projectId: 100, project: 'aaa', taskId: 112, description: '123', estimate: 6, rate: 150},
{projectId: 100, project: 'aaa', taskId: 115, description: '456', estimate: 8, rate: 0},
{projectId: 101, project: 'bbb', taskId: 101, description: '789', estimate: 6, rate: 100},
{projectId: 101, project: 'bbb', taskId: 102, description: 'qwert', estimate: 6, rate: 100},
{projectId: 102, project: 'ccc', taskId: 105, description: 'asdf', estimate: 4, rate: 125},
{projectId: 102, project: 'ccc', taskId: 106, description: 'uioo', estimate: 4, rate: 125},
];

I made this code from ...grid/totals example and columnLock example.....

Condor
12 Nov 2008, 5:43 AM
It's:

plugins: [new Ext.ux.plugins.LockedGroupHeaderGrid()]
and the column model needs a 'rows' config option, see example in GroupHeaderPlugin-widthfix.zip from here (http://extjs.com/forum/showthread.php?t=22337).

pingTeam
12 Nov 2008, 6:22 AM
he,

is it possible to use in the same grid GroupSummary and columnLock?
~o)

Condor
12 Nov 2008, 6:29 AM
is it possible to use in the same grid GroupSummary and columnLock?

No, LockingGridView doesn't even support grouping.

You would first have to create a LockingGroupingView, and next, create a LockingGroupSummary plugin.

liulei
17 Nov 2008, 12:53 AM
I use LockingEditorGridPanel ,but display two grid in IE and firefox. I use ext2.2 and add below code
Ext.override(Ext.grid.LockingGridView, {
renderUI : function(){
var header = this.renderHeaders();
var body = this.templates.body.apply({rows:''});
var html = this.templates.master.apply({
body: body,
header: header[0],
lockedBody: body,
lockedHeader: header[1]
});
var g = this.grid;
g.getGridEl().dom.innerHTML = html;
this.initElements();
Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
Ext.fly(this.lockedInnerHd).on("click", this.handleHdDown, this);
this.mainHd.on("mouseover", this.handleHdOver, this);
this.mainHd.on("mouseout", this.handleHdOut, this);
this.mainHd.on("mousemove", this.handleHdMove, this);
this.lockedHd.on("mouseover", this.handleHdOver, this);
this.lockedHd.on("mouseout", this.handleHdOut, this);
this.lockedHd.on("mousemove", this.handleHdMove, this);
this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
this.scroller.on('scroll', this.syncScroll, this);
if(g.enableColumnResize !== false){
this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.lockedHd.dom);
this.splitone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
this.splitone.setOuterHandleElId(Ext.id(this.mainHd.dom));
}
if(g.enableColumnMove){
this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
}
if(g.enableHdMenu !== false){
if(g.enableColumnHide !== false){
this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
this.colMenu.on("itemclick", this.handleHdMenuClick, this);
}
this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
this.hmenu.add(
{id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
{id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
);
if(this.grid.enableColLock !== false){
this.hmenu.add('-',
{id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
{id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
);
}
if(g.enableColumnHide !== false){
this.hmenu.add('-',
{id:"columns", text: this.columnsText, menu: this.colMenu, iconCls: 'x-cols-icon'}
);
}
this.hmenu.on("itemclick", this.handleHdMenuClick, this);
}
if(g.enableDragDrop || g.enableDrag){
var dd = new Ext.grid.GridDragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}
this.updateHeaderSortState();
},
afterRender : function(){
var bd = this.renderRows();
if (bd == '') bd = ['', ''];
this.mainBody.dom.innerHTML = bd[0];
this.lockedBody.dom.innerHTML = bd[1];
this.processRows(0, true);
if(this.deferEmptyText !== true){
this.applyEmptyText();
}
},
updateAllColumnWidths : function(){
var tw = this.cm.getTotalWidth();
var lw = this.cm.getTotalLockedWidth();
var clen = this.cm.getColumnCount();
var lclen = this.cm.getLockedCount();
var ws = [];
for(var i = 0; i < clen; i++){
ws[i] = this.getColumnWidth(i);
}
this.innerHd.firstChild.firstChild.style.width = (tw - lw) + 'px';
this.mainWrap.dom.style.left = lw + 'px';
this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
for(var i = 0; i < clen; i++){
var hd = this.getHeaderCell(i);
hd.style.width = ws[i] + 'px';
}
var ns = this.getRows();
var lns = this.getLockedRows();
for(var i = 0, len = ns.length; i < len; i++){
ns[i].style.width =(tw - lw) + 'px';
ns[i].firstChild.style.width = (tw-lw) + 'px';
lns[i].style.width = lw + 'px';
lns[i].firstChild.style.width = lw + 'px';
for(var j = 0; j < lclen; j++){
var row = lns[i].firstChild.rows[0];
row.childNodes[j].style.width = ws[j] + 'px';
}
for(var j = lclen; j < clen; j++){
var row = ns[i].firstChild.rows[0];
row.childNodes[j].style.width = ws[j] + 'px';
}
}
this.onAllColumnWidthsUpdated(ws, tw);
},
updateColumnWidth : function(col, width){
var w = this.getColumnWidth(col);
var tw = this.cm.getTotalWidth();
var lclen = this.cm.getLockedCount();
var lw = this.cm.getTotalLockedWidth();
var hd = this.getHeaderCell(col);
hd.style.width = w;
var ns, gw;
var ncol = col;
if(col < lclen) {
ns = this.getLockedRows();
gw = lw;
this.lockedInnerHd.firstChild.firstChild.style.width = gw + 'px';
this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
this.mainWrap.dom.style.display='none';
this.mainWrap.dom.style.display='';
}else {
ns = this.getRows();
gw = tw - lw;
ncol -= lclen;
this.innerHd.firstChild.firstChild.style.width = gw + 'px';
}
for(var i = 0, len = ns.length; i < len; i++){
ns[i].style.width = gw + 'px';
ns[i].firstChild.style.width = gw + 'px';
ns[i].firstChild.rows[0].childNodes[ncol].style.width = w;
}
this.onColumnWidthUpdated(col, w, tw);
this.layout();
}
});

Condor
17 Nov 2008, 2:18 AM
You have a javascript error in your Ext.onReady code (and due to a bug in Ext.onReady this will make Ext.onReady execute twice).

mankz
19 Nov 2008, 2:42 PM
@condor:

I'm playing with the ColumnLock extension with your patch applied, on the initial render the locked columns go "all the way down" as opposed to leaving like 20 px room to account for the horizontal scrollbar. I've attached an image showing the error in the bottom left corner.

If I resize the browser window, the grid resizes itself and all looks ok and there is whitespace as expected (see another image attached)

Any clues? Same results in IE7 and FF3.x, here is my JS code:



Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/js/Ext/ext-2_2/resources/images/default/s.gif';

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function pctChange(val, meta, rec, rowIdx, colIdx){
if (colIdx % 2 === 0) {
meta.css = 'alternatingColumn';
}
return val;
}

// example of custom renderer function
function subtotal(val, meta){
meta.css = 'subTotalColumn';
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.LockingGridPanel({
store: store,
enableDragDrop : false,
columns: [
{id:'company',header: "Client name",width: 75, sortable: true, locked:true, dataIndex: 'company'},
{header: "Job number", sortable: true,width: 75, locked:true, dataIndex: 'price'},
{header: "Job name", sortable: true,width: 75, locked:true, dataIndex: 'company'},
{header: "<b>subtotal</b>", width: 75, sortable: true, locked:true, dataIndex: 'pctChange', renderer: subtotal},
{header: "estimate", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}
],
title:'Actuals (hours)'
});

var vp = new Ext.Viewport({
items:[grid],
layout:'fit'
});
});

Condor
19 Nov 2008, 10:50 PM
You can probably fix this by adding

this.layout();
to the afterRender method.

mankz
20 Nov 2008, 9:16 AM
Works like a charm, big thanks Condor! =D>

mankz
20 Nov 2008, 9:27 AM
So, next question:

I can't get it working fully, the headers become out of sync after scrolling a bit to the right. Seems like the scrolling sync part doesn't seem to be fully functioning. See the attached image, according to my code I should see January 2009 and February 2009 to the far right.

Code:


Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/js/Ext/ext-2_2/resources/images/default/s.gif';

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function pctChange(val, meta, rec, rowIdx, colIdx){
if (colIdx % 2 === 0) {
meta.css = 'alternatingColumn';
}
return val;
}

// example of custom renderer function
function subtotal(val, meta){
meta.css = 'subTotalColumn';
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.LockingGridPanel({
store: store,
enableDragDrop : false,
cm: new Ext.grid.LockingColumnModel({
columns: [
{id:'company',header: "Client name",width: 75, sortable: true, locked:true, dataIndex: 'company'},
{header: "Job number", sortable: true,width: 75, locked:true, dataIndex: 'price'},
{header: "Job name", sortable: true,width: 75, locked:true, dataIndex: 'company'},
{header: "<b>subtotal</b>", width: 75, sortable: true, locked:true, dataIndex: 'pctChange', renderer: subtotal},
{header: "actual", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "actual", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "estimate", align:'right',width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}
],
rows: [
[
{colspan: 4},
{header: "February 2008",colspan: 2 },
{header: "March 2008",colspan: 2},
{header: "April 2008",colspan: 2},
{header: "May 2008",colspan: 2},
{header: "June 2008",colspan: 2},
{header: "July 2008",colspan: 2},
{header: "August 2008",colspan: 2},
{header: "September 2008",colspan: 2},
{header: "October 2008",colspan: 2},
{header: "November 2008",colspan: 2 },
{header: "December 2008",colspan: 2},
{header: "January 2009",colspan: 2},
{header: "February 2009",colspan: 2 }
]
]
}),
title:'Actuals (hours)',
plugins: [new Ext.ux.plugins.LockedGroupHeaderGrid()]
});

var vp = new Ext.Viewport({
items:[grid],
layout:'fit'
});
});

mankz
20 Nov 2008, 6:07 PM
The header scrolling bug was caused by the following css property in GroupHeaderPlugin.css:


.x-grid3-header-offset {
width: auto;
}

After removing it the grid with locked columns and grouped headers works 100% in IE7, the scrolling doesn't work in FF3.x, it's very stuttering. Also the grouped columns are out of sync in FF3.x and Chrome (see image attached, likely an issue with the grouped header css not playing well together with the column lock css). Anyone experienced this?

rarerules
21 Nov 2008, 9:25 AM
Found a pretty major bug using an editable locking grid.

Only unlocked columns can have field editors. Locked columns that are editable do not display the editor at all.

Any ideas?

Condor
21 Nov 2008, 10:51 PM
After removing it the grid with locked columns and grouped headers works 100% in IE7, the scrolling doesn't work in FF3.x, it's very stuttering.

Do not remove the .x-grid3-header-offset CSS rule. Instead add this bugfix (http://www.extjs.com/forum/showthread.php?p=243229#post243229) (which unfortunately doesn't work with locked columns. you would also need to make the suggested changes in LockingGridView).


Locked columns that are editable do not display the editor at all.
Try if this helps:

Ext.override(Ext.grid.LockingGridView, {
getEditorParent: function(ed) {
return this.el.dom;
}
});

mankz
22 Nov 2008, 12:34 AM
Ok, I actually have a working setup now in FF3.x IE6/7 as long as I keep the columns not resizable which is fine.

Your help is worth so much, thanks for taking the time to answer! :)

liulei
24 Nov 2008, 1:14 AM
I write below code:

Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){

var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
view.lockedBody.on('mousedown', this.onMouseDown, this);
printC(view);
}, this);
},

onMouseDown : function(e, t){

e.stopEvent();

var index = this.grid.getView().findRowIndex(t);
var r = this.grid.store.getAt(index);
r.set(this.dataIndex, !r.data[this.dataIndex]);
},
renderer : function(v, p, record){


return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}};

but when click the locked column, this.grid.getView().findRowIndex(t) get undefined.

Condor
24 Nov 2008, 1:27 AM
1. I tried, but it works for me.
2. Don't override onMouseDown. Use a rowmousedown even listener.

liulei
26 Nov 2008, 5:58 PM
HI Condor (http://extjs.com/forum/member.php?u=343), I use below code:
edit-grid.js:


/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){
Ext.QuickTips.init();

function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;

// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header: "Indoor?",
dataIndex: 'indoor',
width: 55,
locked:true
});

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = [


{
header: "Light",
dataIndex: 'light',
width: 130,

locked:true,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},

{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
locked:true,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkColumn,
{
id:'common',
header: "Common Name",
dataIndex: 'common',
width: 220,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Price",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
}
];

// by default columns are sortable
cm.defaultSortable = true;

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);

// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'plants.xml',

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),

sortInfo:{field:'common', direction:'ASC'}
});

// create the editor grid
var grid = new Ext.grid.LockingEditorGridPanel({
store: store,
columns: cm,
renderTo: 'editor-grid',
width:600,
height:300,
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
plugins:checkColumn,
clicksToEdit:1,

tbar: [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});

// trigger the data store load
store.load();
});

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('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.rowMouseDown, this);
view.lockedBody.on('mousedown', this.rowMouseDown, this);
}, this);
},

rowMouseDown : function(e, t){

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

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>';
}
};

table.html:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Editor Grid Example</title>

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>


<script type="text/javascript" src="../ext/ext-all-debug.js"></script>

<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<link rel="stylesheet" type="text/css" href="../ext/shared/examples.css" />
<script type="text/javascript" src="columnLock.js"></script>
<script type="text/javascript" src="edit-grid.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/ext-patch.css" />

<link rel="stylesheet" type="text/css" href="columnLock.css" />
</head>

<body>

<script type="text/javascript" src="../ext/shared/examples.js"></script>


<!-- you must define the select box here, as the custom editor for the 'Light' column will require it -->
<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>

<option value="Mostly Sunny">Mostly Sunny</option>

<option value="Sunny">Sunny</option>
</select>

<div id="editor-grid"></div>
</body>
</html>



when I the first time click the locked column, this.grid.getView().findRowIndex(t) get right value,but when I second click the locked column, this.grid.getView().findRowIndex(t) get undefined.

if Light and Available are locked, click Light column don't display the comboBox , click Available column don't display DateField .

Condor
27 Nov 2008, 8:06 AM
OK, to solve this you need to fix:

Ext.override(Ext.grid.LockingGridView, {
getEditorParent : function(ed){
return this.el.dom;
},
refreshRow : function(record){
Ext.grid.LockingGridView.superclass.refreshRow.call(this, record);
var index = this.ds.indexOf(record);
this.getLockedRow(index).rowIndex = index;
}
});

tonedeaf
27 Nov 2008, 11:17 AM
The locking column is out of sync when dealing with grids with multiline text in cells. I simply inserted a <BR> tag in the cell content to make it multiline.

I heavily use multiline text in ExtJS grids and I unfortunately cannot use this excellent extension. Can this be fixed?

Condor
27 Nov 2008, 11:48 AM
The locking column is out of sync when dealing with grids with multiline text in cells. I simply inserted a <BR> tag in the cell content to make it multiline.

I heavily use multiline text in ExtJS grids and I unfortunately cannot use this excellent extension. Can this be fixed?

The extension would have to resync row heights every time a row changes or rows are added or removed.
I'll try to whip something up...

mankz
2 Dec 2008, 10:35 AM
OK, to solve this you need to fix:

Ext.override(Ext.grid.LockingGridView, {
getEditorParent : function(ed){
return this.el.dom;
},
refreshRow : function(record){
Ext.grid.LockingGridView.superclass.refreshRow.call(this, record);
var index = this.ds.indexOf(record);
this.getLockedRow(index).rowIndex = index;
}
});

Thanks Condor, once again you save my day! =D>

rarerules
3 Dec 2008, 10:23 AM
Found a pretty major bug using an editable locking grid.

Only unlocked columns can have field editors. Locked columns that are editable do not display the editor at all.

Any ideas?

This seems to be a pretty major issue to me. Any help? Thanks in advance!

Condor
3 Dec 2008, 10:43 PM
This seems to be a pretty major issue to me. Any help? Thanks in advance!

You obviously didn't read the following posts (mainly this one (http://extjs.com/forum/showthread.php?p=256219#post256219))!

rarerules
9 Dec 2008, 1:15 PM
Thanks Condor! Somehow I totally missed that. This works perfectly :)

Plater
11 Dec 2008, 2:42 AM
Thanx for this awesome fix guys, this saved my life! _0_

rarerules
17 Dec 2008, 11:59 AM
As usual, awesome work...I wouldn't have been able to upgrade to Ext2 without this code. I do have one problem with the locking grid however.

When editing a cell that is in a locked column, the horizontal scroll bar moves all the way to the left. This is counter intuitive, since the cell that was clicked did not require the scroll bar to move at all. Also of note: when performing the same action in Excel, this does not happen.

Ideally, the horizontal scroll bar should not move when clicking on a locked cell. Any ideas on how to fix this?

Thanks so much.

hahacow
19 Dec 2008, 11:21 AM
How can i get "columnLock.js" in "LockingGridPanel_update5.zip"?
I've downloaded "LockingGridPanel_update5.zip", but i can't read it because it is unknown code!Thank u!

Condor
19 Dec 2008, 11:59 PM
IE corrupts downloads from the forum. Try downloading with a different browser.

jlhs5
4 Jan 2009, 11:55 AM
In last posts, read Group -- Lock is not posibble, but Filter is?

Sorry for my english
Thanks

Condor
4 Jan 2009, 10:54 PM
In last posts, read Group -- Lock is not posibble, but Filter is?

Sorry for my english
Thanks

Are you talking about grouping rows or columns (for columns see here (http://extjs.com/forum/showthread.php?p=243428#post243428)). For grouping rows you would need to write a entirely new plugin (lots of work!).

Most filter plugins don't affect the grid rendering process, so they should already work.

jlhs5
5 Jan 2009, 12:49 PM
I replicate the example from Locking a Filter and fail with error in firebug

Ext.grid.GridFilters is not a constructor
[Break on this error] options: ['2004', '2005', '2006', '2007','2008']

My Code
Html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Locking column example</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.js"></script>

<link rel="stylesheet" type="text/css" href="columnLock.css" />
<script type="text/javascript" src="columnLock.js"></script>

<script type="text/javascript" src="ux/menu/EditableItem.js"></script>
<script type="text/javascript" src="ux/menu/RangeMenu.js"></script>

<script type="text/javascript" src="ux/grid/GridFilters.js"></script>
<script type="text/javascript" src="ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="ux/grid/filter/BooleanFilter.js"></script>

<style type="text/css">
.x-grid3-hd-row td.ux-filtered-column {
font-style: italic;
font-weight: bold;
}
</style>


<script type="text/javascript" src="columnLockExample.js"></script>
</head>
<body>
<h1>Column Locking Example</h1>
<div id="grid-example"></div>
</body>
</html>


JS
[PHP]

Ext.onReady(function(){

//Ext.grid.filter.StringFilter.prototype.icon = 'img/find.png';

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['Enero',2004,71.72,0.02,0.03,'9/1 12:00am'],
['Febrero',2004,29.01,0.42,1.47,'9/1 12:00am'],
['Marzo',2004,83.81,0.28,0.34,'9/1 12:00am'],
['Abril',2004,52.55,0.01,0.02,'9/1 12:00am'],
['Mayo',2004,64.13,0.31,0.49,'9/1 12:00am'],
['Junio',2004,31.61,-0.48,-1.54,'9/1 12:00am'],
['Julio',2004,75.43,0.53,0.71,'9/1 12:00am'],
['Agosto',2004,67.27,0.92,1.39,'9/1 12:00am'],
['Septiembre',2004,49.37,0.02,0.04,'9/1 12:00am'],
['Octubre',2004,40.48,0.51,1.28,'9/1 12:00am'],
['Noviembre',2004,68.1,-0.43,-0.64,'9/1 12:00am'],
['Diciembre',2004,34.14,-0.08,-0.23,'9/1 12:00am'],
['Enero',2005,71.72,0.02,0.03,'9/1 12:00am'],
['Febrero',2005,29.01,0.42,1.47,'9/1 12:00am'],
['Marzo',2005,83.81,0.28,0.34,'9/1 12:00am'],
['Abril',2005,52.55,0.01,0.02,'9/1 12:00am'],
['Mayo',2005,64.13,0.31,0.49,'9/1 12:00am'],
['Junio',2005,31.61,-0.48,-1.54,'9/1 12:00am'],
['Julio',2005,75.43,0.53,0.71,'9/1 12:00am'],
['Agosto',2005,67.27,0.92,1.39,'9/1 12:00am'],
['Septiembre',2005,49.37,0.02,0.04,'9/1 12:00am'],
['Octubre',2005,40.48,0.51,1.28,'9/1 12:00am'],
['Noviembre',2005,68.1,-0.43,-0.64,'9/1 12:00am'],
['Diciembre',2005,34.14,-0.08,-0.23,'9/1 12:00am'],
['Enero',2006,71.72,0.02,0.03,'9/1 12:00am'],
['Febrero',2006,29.01,0.42,1.47,'9/1 12:00am'],
['Marzo',2006,83.81,0.28,0.34,'9/1 12:00am'],
['Abril',2006,52.55,0.01,0.02,'9/1 12:00am'],
['Mayo',2006,64.13,0.31,0.49,'9/1 12:00am'],
['Junio',2006,31.61,-0.48,-1.54,'9/1 12:00am'],
['Julio',2006,75.43,0.53,0.71,'9/1 12:00am'],
['Agosto',2006,67.27,0.92,1.39,'9/1 12:00am'],
['Septiembre',2006,49.37,0.02,0.04,'9/1 12:00am'],
['Octubre',2006,40.48,0.51,1.28,'9/1 12:00am'],
['Noviembre',2006,68.1,-0.43,-0.64,'9/1 12:00am'],
['Diciembre',2006,34.14,-0.08,-0.23,'9/1 12:00am'],
['Enero',2007,71.72,0.02,0.03,'9/1 12:00am'],
['Febrero',2007,29.01,0.42,1.47,'9/1 12:00am'],
['Marzo',2007,83.81,0.28,0.34,'9/1 12:00am'],
['Abril',2007,52.55,0.01,0.02,'9/1 12:00am'],
['Mayo',2007,64.13,0.31,0.49,'9/1 12:00am'],
['Junio',2007,31.61,-0.48,-1.54,'9/1 12:00am'],
['Julio',2007,75.43,0.53,0.71,'9/1 12:00am'],
['Agosto',2007,67.27,0.92,1.39,'9/1 12:00am'],
['Septiembre',2007,49.37,0.02,0.04,'9/1 12:00am'],
['Octubre',2007,40.48,0.51,1.28,'9/1 12:00am'],
['Noviembre',2007,68.1,-0.43,-0.64,'9/1 12:00am'],
['Diciembre',2007,34.14,-0.08,-0.23,'9/1 12:00am'],
['Enero',2008,71.72,0.02,0.03,'9/1 12:00am'],
['Febrero',2008,29.01,0.42,1.47,'9/1 12:00am'],
['Marzo',2008,83.81,0.28,0.34,'9/1 12:00am'],
['Abril',2008,52.55,0.01,0.02,'9/1 12:00am'],
['Mayo',2008,64.13,0.31,0.49,'9/1 12:00am'],
['Junio',2008,31.61,-0.48,-1.54,'9/1 12:00am'],
['Julio',2008,75.43,0.53,0.71,'9/1 12:00am'],
['Agosto',2008,67.27,0.92,1.39,'9/1 12:00am'],
['Septiembre',2008,49.37,0.02,0.04,'9/1 12:00am'],
['Octubre',2008,40.48,0.51,1.28,'9/1 12:00am'],
['Noviembre',2008,68.1,-0.43,-0.64,'9/1 12:00am'],
['Diciembre',2008,34.14,-0.08,-0.23,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'mes'},
{name: 'anio',type:'float'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

store.loadData(myData);

var filters = new Ext.grid.GridFilters({
filters:[
{type: 'string', dataIndex: 'mes'},
{
type: 'list',
dataIndex: 'anio',
options: ['2004', '2005', '2006', '2007','2008']
}
]});

filters.local = true;
// create the Grid
var grid = new Ext.grid.LockingGridPanel({
store: store,
columns: [
{id:'mes',header: "mes", width: 80, sortable: true, dataIndex: 'anio', locked: true},
{id:'anio',header: "A

MeDavid
5 Jan 2009, 1:01 PM
....
var filters = new Ext.grid.GridFilters({
filters:[
{type: 'string', dataIndex: 'mes'},
{
type: 'list',
dataIndex: 'anio',
options: ['2004', '2005', '2006', '2007','2008']
}
]});
....
[/PHP]

there's something wrong ??? :s

Judging from your error and file names I guess it would be because you use the wrong namespace Ext.grid.GridFilters instead of Ext.ux.GridFilters

jlhs5
5 Jan 2009, 1:10 PM
:">


var filters = new Ext.ux.grid.GridFilters({


Thanks MeDavid

=D>

jitu
15 Jan 2009, 2:50 AM
I hv seen columnlock.js ,any about rowlock..........

janapol
20 Jan 2009, 6:03 PM
I've been using the LockingGridEditorPanel component for a couple of weeks and I have been very happy with it, but I encountered a bug and I was wondering if anybody could help me out.

When I change clicksToEdit from 2 to 1 on the LockingEditorGridPanel config, the cells don't always become editable after a click. Here are some steps to reproduce the problem.

1. Create an LockingEditorGridPanel with several editable columns.
2. Click on the first column and enter some text.
3. Click on the next column in the same row. The second column will not be editable until you click in the cell a second time.

I reproduced this bug using the columnLockExample.js from the latest code package (update 5).

Here is the code I used:

var editor1 = new Ext.form.TextField({

});

var editor2 = new Ext.form.TextField({

});


var editor3 = new Ext.form.TextField({

});


// create the Grid
var grid = new Ext.grid.LockingEditorGridPanel({
store: store,
clicksToEdit: 1,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', locked: true},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', editor: editor1},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change', editor: editor2},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange', editor: editor3},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
height:350,
width:600,
title:'Array Grid'
});Thanks in Advance.

Condor
20 Jan 2009, 11:38 PM
This is not a bug in LockingEditorGridPanel, it's a bug (http://extjs.com/forum/showthread.php?t=51734) in EditorGridPanel.

minty
22 Jan 2009, 2:05 AM
Hi,
I have downloaded the latest LockingGridPanel and everything works well with up to a certain number of columns (245 * 40px wide + locking column 180px = total of 9980px) but if I add any more columns where total px width > 10000 the row columns get out of sync with the header (similar problem to previous posters). The problem is apparant on IE6, 7 and FF 2, 3.

I am fairly new to Ext & JS and have spent sometime attempting to resolve the issue but cannot see what is wrong (:|. I was hoping than an expert could point me in the right direction before I spend more time on it !

Many Thanks,
Chris

Condor
22 Jan 2009, 3:36 AM
The grid header has a 10000px width. If you want more you can increase it with a CSS rule:

.x-grid3-header-offset{width:30000px;}

minty
22 Jan 2009, 4:07 AM
Ah, now I understand. Many thanks for your quick response.

Chris.

cmschick
26 Feb 2009, 6:58 AM
This has to be one of the most confusing posts there is on this forum. Obviously this solution is not fully fleshed out and the example doesn't even work correctly in IE7. I am using Ext.ux.Grid.GridFilters but I noticed a post by Condor saying we should be usig Ext.Grid.GridFilters. So I take it the grid filters functionality has been added to the Main Ext project?

After reading this post (all 19 pages) I'm not even sure if that is the problem. There are too many posts in here that indicate you need this patch or that patch and if its in a grouping grid then this or if its this than that... Whatever.

How about a concise post that actually explains the setup and what caveats there are?

Thanks.

Condor
26 Feb 2009, 7:06 AM
The problem with LockingGridPanel is that it changes so much aspects of GridPanel that most plugins for GridPanel no longer work for LockingGridPanel.

Which problem exactly are you having with the filter plugin?
And which filter plugin are you actually using (the extension forum has several, one of which is included in the Ext examples)?

rarerules
26 Feb 2009, 7:15 AM
I found a small problem:

Assume you have a grid with more columns than fits on the user's screen. A horizontal scrollbar will appear underneath the unlocked columns. Suppose the user scrolls all the way to the right to view the last column, then clicks on a cell in one of the locked columns. The scrollbar will move all the way to the left.

For the user, this is unexpected since he did not change the viewable unlocked columns. In fact, in MS Excel, this does not happen.

Any idea how to fix this?

akannu
26 Feb 2009, 7:15 AM
I think Ext should continue to offer the LockingGridPanel so we can decide:
a) To use it without those extra features (like grouping, row expand, etc..) for simple use cases where horizontal scrolling is more important.
b) Use the new GridPanel that comes with the new features but no column locking.

Just dropping the column locking feature and making us rely on user extensions makes it challenging for us from licensing and support perspective.

just my 2 cents.

jchau
26 Feb 2009, 9:27 AM
Suppose the user scrolls all the way to the right to view the last column, then clicks on a cell in one of the locked columns. The scrollbar will move all the way to the left.

Any idea how to fix this?

I notice the same thing on Firefox, Chrome, and IE7. This is a pretty big deal.

cmschick
27 Feb 2009, 7:49 PM
Hi Condor,

Thank you for clearing some of this up for me. I'm not using the version that comes with the samples. My GridFilters.js file has this on line 99:

* @version 0.2.9 (Sep 2, 2008)

I also have this grid inside of the Ext.ux.layout.RowFitLayout (line 40: * @version 0.1) which is working fine. The problem I am seeing is that all of the columns that do not have 'locked: true' set in the colModel are hidden. Also my data is not there or if it is it is hidden too. So basically I end up with one column in my grid which is locked and is scrollable but it's basically useless.

liuzxtest
11 Mar 2009, 1:10 AM
I find a bug while i'm using "Ext.grid.LockingGridPanel"

liuzxtest
11 Mar 2009, 1:13 AM
up up
I find a bug while i'm using "Ext.grid.LockingGridPanel"

Condor
11 Mar 2009, 3:36 AM
LockingGridPanel assumes that both the locked section and the scrolling section have the same row height.

You are probably rendering something in the right section that increases the row height and you need to adjust the row height of the left section to match.

mystix
11 Mar 2009, 5:22 AM
up up

what the heck??!?! you don't bump threads a mere 3 minutes after posting... /:)

slava_k
12 Mar 2009, 1:25 AM
I found a small problem:

Assume you have a grid with more columns than fits on the user's screen. A horizontal scrollbar will appear underneath the unlocked columns. Suppose the user scrolls all the way to the right to view the last column, then clicks on a cell in one of the locked columns. The scrollbar will move all the way to the left.

For the user, this is unexpected since he did not change the viewable unlocked columns. In fact, in MS Excel, this does not happen.

Any idea how to fix this?

Hi All!
for myself i found how to prevent unintended horizontal scroll movement to the left.
need to add this ...

Ext.override(Ext.grid.LockingGridView, {

getResolvedXY : function(resolved){
if(!resolved){
return null;
}
var lw = this.cm.getTotalLockedWidth();
var s = this.scroller.dom, c = resolved.cell, r = resolved.row;
return c ? Ext.fly(c).getXY() : [this.el.getX()+lw, Ext.fly(r).getY()];
}

});


PS i use Ext [2.2] and LockingGridPanel [Update 5]

hzwei
16 Mar 2009, 11:37 PM
您好,我是EXT爱好者,想请教下一个问题:
我在项目中要适用锁列locking column功能,但是您的源码貌似只支持单层表头的,不能支持多层表头的插件,请问如何解决这个问题?

mystix
17 Mar 2009, 7:08 PM
您好,我是EXT爱好者,想请教下一个问题:
我在项目中要适用锁列locking column功能,但是您的源码貌似只支持单层表头的,不能支持多层表头的插件,请问如何解决这个问题?

translation: @hzwei would like to use the "Grid With Locking Column" ux with the GroupHeaderGrid plugin, but is unsure of how to proceed.

Condor
17 Mar 2009, 10:32 PM
translation: @hzwei would like to use the "Grid With Locking Column" ux with the GroupHeaderGrid plugin, but is unsure of how to proceed.

The GroupHeaderGrid plugin doesn't work with locking columns. That is why I wrote a LockedGroupHeaderGrid plugin (http://www.extjs.com/forum/showthread.php?p=243428#post243428) (it's based on an older version of the GroupHeaderGrid plugin, so it doesn't have all the features).

hzwei
18 Mar 2009, 4:51 PM
感谢您的答复!问题已经解决!
因为我的英文水平不好,所以只能用中文,谢谢!
还有两个问题:
第一:EXT gridpanel导出excel有没有什么好的方法?我用过两种,一个类似这个:


var vExportContent = grid.getExcelXml();
if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2
|| Ext.isSafari3) {
var fd = Ext.get('frmDummy');
if (!fd) {
fd = Ext.DomHelper.append(Ext.getBody(), {
tag : 'form',
method : 'post',
id : 'frmDummy',
action : 'exportexcel.jsp',
target : '_blank',
name : 'frmDummy',
cls : 'x-hidden',
cn : [{
tag : 'input',
name : 'exportContent',
id : 'exportContent',
type : 'hidden'
}]
}, true);
}
fd.child('#exportContent').set({
value : vExportContent
});
fd.dom.submit();
} else {
document.location = 'data:application/vnd.ms-excel;base64,'
+ Base64.encode(vExportContent);
},

这钟方法可以导出,但同样的问题,不能导出多层表头的gridpanel数据,也就是当gridpanel有多层表头时候,用这种方法只能导出最底层表头的;
还有种方法像这样:


window.clipboardData.setData("Text", tableHTML);
try {
var ExApp = new ActiveXObject("Excel.Application");
var ExWBk = ExApp.workbooks.add();
var ExWSh = ExWBk.worksheets(1);
ExApp.DisplayAlerts = false;
ExApp.visible = true;
} catch (e) {
if (e.number != -2146827859)
alert("您的电脑没有安装Microsoft Excel软件!");
return false;
}
ExWBk.worksheets(1).Paste;

能导出多表头的,但不稳定,有的系统可以导出,有的系统导了后没反应;请问有没有什么好的解决方法可以很好的导出多层表头的?
第二个问题:能不能给一个ext gridpanel直接打印的示例,支持多层表头的?即可以直接打印多层表头的gridpanel数据?

mystix
18 Mar 2009, 6:26 PM
感谢您的答复!问题已经解决!
因为我的英文水平不好,所以只能用中文,谢谢!
还有两个问题:
第一:EXT gridpanel导出excel有没有什么好的方法?我用过两种,一个类似这个:


// ... SNIP ...

这钟方法可以导出,但同样的问题,不能导出多层表头的gridpanel数据,也就是当gridpanel有多层表头时候,用这种方法只能导出最底层表头的;
还有种方法像这样:


// ... SNIP ...

能导出多表头的,但不稳定,有的系统可以导出,有的系统导了后没反应;请问有没有什么好的解决方法可以很好的导出多层表头的?

translation:
thanks for taking the time to answer. i've managed to solve the problem.
pardon me for typing only in chinese, as i'm not too good at english.

i've got 2 more questions i hope you could help me with:
Question 1) is there any recommended way to export a gridpanel to Excel? i've used 2 methods previously, the first being [ see 1st block of code ] which exports the gridpanel successfully, but doesn't export grouped headers (it only exports the group header at the lowest level). the other method i've tried is [ see 2nd block of code ] which manages to export the grouped headers, but doesn't work reliably across systems (browser??) -- on some the export is successful, on some nothing gets output. is there a reliable cross-system (browser??) way to export grids with multiple headers to excel?



第二个问题:能不能给一个ext gridpanel直接打印的示例,支持多层表头的?即可以直接打印多层表头的gridpanel数据

Question 2) Could you post an example of a gridpanel which can be printed (i.e. one with grouped headers?)

mystix
18 Mar 2009, 6:27 PM
@hzwei,
please run your posts through google translate in future: http://translate.google.com/translate_t#
i can't be translating everyone's posts.

hzwei
18 Mar 2009, 8:51 PM
[ see post #203 -- i've already translated it for you ]

yingwuhahaha
18 Mar 2009, 10:06 PM
hi,I use lockingGridPanel with Ext2.0.2,and I found 2 bugs.

No.1:see the first image.
when I resize the column to smaller (first scroll it to right),the header is not synch with the body.
I have to use grid.on('columnresize',function(){grid.getView().syncScroll();}) to fix it.
it's ok on Ext2.2.

No2: see the second and the third image.
I open the example in IE7 with Ext2.0.2,but there is nothing show in the grid body util I click the header sort it.
I have to call grid.getView().refresh() after the grid rendered.
it's ok on Ext2.2.

Is any one else has the same problem?

Condor
18 Mar 2009, 10:46 PM
hi,I use lockingGridPanel with Ext2.0.2,and I found 2 bugs.

There was a major change in the GridPanel/GridView code between Ext 2.1 and 2.2. That is why I needed to create version 5 of the LockingGridPanel.
As mentioned in the first post version 5 ONLY works for Ext 2.2 and not for previous versions and version 4 only works for Ext 2.1 and below.
Unfortunately for you version 4 doesn't contain the extra bugfixes I also added to version 5 (so if you want those you have a little code comparing to do).

ps. For Ext 2.3 (or 2.2.2) and Ext 3.0 I will need to create a version 6, because the GridView code has changed significantly again.

Condor
18 Mar 2009, 10:50 PM
---chinese text---

getExcelXml() doesn't know about grouped headers, so you'll have to modify the code yourself so it includes them.

hzwei
18 Mar 2009, 11:17 PM
I don not know how to modify the source code of getGridExcel(),so can you help me?

hzwei
18 Mar 2009, 11:19 PM
Can you give an example of upload video with ext?
and can you give me an example of directly print of ext gridpanel?

Condor
18 Mar 2009, 11:29 PM
I don not know how to modify the source code of getGridExcel(),so can you help me?

You're probably better off asking this question in the thread about the Excel export code.


Can you give an example of upload video with ext?

Any uploading is simply file uploading (e.g. using FileUploadField). What you do with the uploaded file on the server is your own business.


and can you give me an example of directly print of ext gridpanel?

Most people do this by creating a second GridPanel (using the same store, but with autoHeight:true) inside a hidden IFRAME and print the IFRAME.

NicoP
19 Mar 2009, 2:52 AM
Hi,

Does someone has tried to merge successfully the GridColumnLocked plugin with the LiveGrid plugins?

Thanks.

yingwuhahaha
19 Mar 2009, 10:08 PM
There was a major change in the GridPanel/GridView code between Ext 2.1 and 2.2. That is why I needed to create version 5 of the LockingGridPanel.
As mentioned in the first post version 5 ONLY works for Ext 2.2 and not for previous versions and version 4 only works for Ext 2.1 and below.
Unfortunately for you version 4 doesn't contain the extra bugfixes I also added to version 5 (so if you want those you have a little code comparing to do).

ps. For Ext 2.3 (or 2.2.2) and Ext 3.0 I will need to create a version 6, because the GridView code has changed significantly again.

thanks for your answer. I'll compare version 4 and 5.

thank you again.

eversound
23 Mar 2009, 11:35 PM
I use a CheckboxSelectionModel sm in LockingGridPanel, and set sm.locked=true, It is locked, but cannot be checked.
My Ext version is 2.2.1 LockingGridPanel update5

Source Code:

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

var gridCols = [
sm,
{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'}
]
var grid = new Ext.grid.LockingGridPanel({
store: store,
cm: gridCols,
sm: sm,
stripeRows: true,
height: 350,
width: 600,
title: 'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();

saadus
30 Mar 2009, 12:36 PM
Hi, i have a grid with multilkine rows, but they are out of sync with locked column.

is there any way to make locked column heigh sync with data?


Plz i need your help

varsha.kothari
15 Apr 2009, 7:22 AM
Hi All,
Its a grt post!! but I am facing 2 problems with this code:

1) I am using the Row Expander Plugin, and I want the rowExpander to be in the locked column side i.e. left side but when I do it, the row does not expand. That means when I lock the expander, it does not expand. Please help me.
Here is the piece of code:


var expander = new xg.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {lastChange}</p>'
),
locked: true
});

var grid = new Ext.grid.LockingEditorGridPanel({
store: store,
columns: [
expander,
{id:'company',header: "Company", width: 70, sortable: true, locked:true, dataIndex: 'company',editor: new Ext.form.TextField()},
{header: "Price", width:40, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 100, 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,
plugins: expander,
width:600,
title:'Array Grid'
});

Please tell me some way to make the column expand even its in locked side.
I am using LockingGridPanel_update5.zip, please help me. I tried the fix given for checkBoxSelectionModel but I that didn't work for me :(
Refer to RowExpander.zip

2) My second problem is : I am trying the code for grouped header column locking. but I am getting error as:


this.cm.rows has no properties
renderHeaders()(function()) groupLoc...Header.js (line 35)
getViewWidth()()ext-base.js (line 9)
renderUI()()columnLock.js (line 685)
initTemplates()()ext-all.js (line 141)
GridView()(Object dom=body#ext-gen6.ext-gecko id=ext-gen6, null)ext-all.js (line 140)
Action()(body#ext-gen6.ext-gecko, undefined)ext-all.js (line 58)
ContainerLayout()()ext-all.js (line 64)
(?)()()GroupHea...gin2.html (line 149)
EventManager()()

I've done the coding in exact way given in post.


var grid = new Ext.grid.LockingEditorGridPanel({
store: store,
//cm:cm,
stripeRows: true,
height:350,
width:600,
title:'Array Grid',
cm: new Ext.grid.LockingColumnModel({
columns:[
{header: 'Id', width: 25, dataIndex: 'id',locked:true},
{header: 'Nr', width: 25, dataIndex: 'nr1'},
{header: 'Text', width: 20, dataIndex: 'text1'},
{header: 'Info', width: 30, dataIndex: 'info1'},
{header: 'Special', width: 30, 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'}
],
rows: [
[
{locked:true},
{header: 'Before', colspan: 1, align: 'center', dataIndex: 'info1'},
{header: '<html><div height="100" style="writing-mode: tb-rl; filter: fliph flipv;">Electronic Stability Program</div></html>', colspan: 1, align: 'center', dataIndex: 'info1'},
{header: '<html><div height="100" style="writing-mode: tb-rl; filter: fliph flipv;">Electronic Stability Program1</div></html>', colspan: 1, align: 'center', dataIndex: 'info1'},
{header: '<html><div height="100" style="writing-mode: tb-rl; filter: fliph flipv;">Electronic Stability Program2</div></html>', colspan: 1, align: 'center', dataIndex: 'info1'},
{header: 'After', colspan: 4, align: 'center', dataIndex: 'info2'},
{colspan: 2}
],[
{locked:true},
{header: '<input type="checkbox">', colspan: 1 },
{header: '<input type="checkbox">', colspan: 1 },
{header: '<input type="checkbox">', colspan: 1 },
{header: '<input type="checkbox">', colspan: 1 },
{header: '<input type="checkbox">', colspan: 1 },
{header: '<input type="checkbox">', colspan: 1 },
{header: '<input type="checkbox">', colspan: 1 },
{header: '<input type="checkbox">', colspan: 1 },
{},
{}
], [
{locked:true},
{},
{header: 'Merchandise', colspan: 3, align: 'center'},
{},
{header: 'Merchandise', colspan: 3, align: 'center'},
{header: 'Sum', colspan: 2, align: 'center'}
]
]
}),
plugins: [new Ext.ux.plugins.LockedGroupHeaderGrid()]

});

Sorry for bad formatting of query..
thanks in Advance..

Condor
15 Apr 2009, 7:25 AM
Locking requires that both the locked cells and the unlocked cells of a row have the same height, which in case of a RowExpander wouldn't be the case.

You would have to make a lot of changes to the RowExpander plugin to make it work with this plugin!

varsha.kothari
15 Apr 2009, 9:44 PM
Hi..
Thanx for the reply Condor...
But can you please tell me what all changes I need to do..
I really need to implement this functionality :((
Thanks in Advance

PCalvinClark
16 Apr 2009, 12:18 PM
I just downloaded the attached zip files above but when I tried to open them I get this error in WinZip:

End-of-central-directory signature not found. Either this file is not a Zip file, or it constitutes one disk of a multi-part Zip file.

Are they supposed to be unzipped with another utility? The attachments I downloaded were 8 and 7 KB.

Thanks!

varsha.kothari
16 Apr 2009, 9:10 PM
Hello..
I m attaching the file again
Thanks for the interest

Condor
16 Apr 2009, 9:48 PM
I just downloaded the attached zip files above but when I tried to open them I get this error in WinZip:

End-of-central-directory signature not found. Either this file is not a Zip file, or it constitutes one disk of a multi-part Zip file.

Are they supposed to be unzipped with another utility? The attachments I downloaded were 8 and 7 KB.

Thanks!


Are you talking about the files in the original post? In that case you need to use a different browser (IE can corrupt forum downloads).

:) Condor

hoanganhinfo
16 Apr 2009, 10:35 PM
How do I integrate grid with locking column and grouping grid ?
Could anyone help me ?
Thanks in advanced.

Condor
16 Apr 2009, 10:59 PM
How do I integrate grid with locking column and grouping grid ?
Could anyone help me ?
Thanks in advanced.

I'm afraid that this is not a simple task and if nobody has done it before that you will have to write the plugin yourself.

bishoco
20 Apr 2009, 10:47 AM
So far this is working well for me. My only question is how do I prevent the user from locking and unlocking columns? I want to lock columns at config time and keep the user from unlocking/locking the columns in the column drop down menu.

The problem is that if the user unlocks a locked column it can change the location and index of that column. I read this whole thread and I didn't see the answer to this.

Thanks

MeDavid
20 Apr 2009, 11:42 PM
My only question is how do I prevent the user from locking and unlocking columns? I want to lock columns at config time and keep the user from unlocking/locking the columns in the column drop down menu.

You could remove the header menu items whiche enable the locking/unlocking

azaqero
30 Apr 2009, 9:54 AM
I have found an odd problem here.

Look at the 2 pictures. The 1st one (001) is of a normal grid view.

The 2nd one (002) is what happens when you hide a column using a column filter.
As you see, the grids are now misaligned from the column header

any help? I tried with:


Ext.override(Ext.grid.LockingGridView, {
getResolvedXY : function(resolved){
if(!resolved){
return null;
}
var lw = this.cm.getTotalLockedWidth();
var s = this.scroller.dom, c = resolved.cell, r = resolved.row;
return c ? Ext.fly(c).getXY() : [this.el.getX()+lw, Ext.fly(r).getY()];
}
});

but nothing. any help will be appreciated :((

ghutchens
8 May 2009, 6:38 AM
Is anyone planning on updating the column lock extension to handle 3.0?

azaqero
8 May 2009, 8:16 AM
I have found an odd problem here.

Look at the 2 pictures. The 1st one (001) is of a normal grid view.

The 2nd one (002) is what happens when you hide a column using a column filter.
As you see, the grids are now misaligned from the column header

any help? I tried with:


Ext.override(Ext.grid.LockingGridView, {
getResolvedXY : function(resolved){
if(!resolved){
return null;
}
var lw = this.cm.getTotalLockedWidth();
var s = this.scroller.dom, c = resolved.cell, r = resolved.row;
return c ? Ext.fly(c).getXY() : [this.el.getX()+lw, Ext.fly(r).getY()];
}
});

but nothing. any help will be appreciated :((

This issue was solved deleting :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
:)

Condor
8 May 2009, 9:40 PM
I have found an odd problem here.

Look at the 2 pictures. The 1st one (001) is of a normal grid view.

The 2nd one (002) is what happens when you hide a column using a column filter.
As you see, the grids are now misaligned from the column header

Which browser is this? If it's only Safari/Chrome/Air then you should use the fix for GridView earlier in this thread.

Condor
8 May 2009, 9:41 PM
Is anyone planning on updating the column lock extension to handle 3.0?

Yes, I'll need to start working on that (also required for Ext 2.2.2 if it is ever released)...

azaqero
9 May 2009, 8:49 AM
Which browser is this? If it's only Safari/Chrome/Air then you should use the fix for GridView earlier in this thread.

Hi Condor

This fix works on FF, IE5,6,7,8 and Chrome, I didnt test it on another browsers.
I'm using desktopexts js, maybe it fix something too?

sramanna
15 May 2009, 11:49 AM
Hello,

Has anyone tested this on Ext 3.0 yet ? I would like to use this with the new RowEditor class.

Thank you.

sramanna
15 May 2009, 12:50 PM
I just tried with Ext 3.0.
I get this error when loading the example.

this.isLocked is not a function
file:ext-3.0-rc1.1/examples/LockingGridPanel_update5/columnLock.js
Line 676

Xander75
19 May 2009, 6:17 AM
Hi,

I am using this Locking Column with an Editor Grid in a tab and a Maximgb TreeGrid in another tab. The TreeGrid uses the GridSummary plugin, which I noticed was no longer scrolling left to right.

Maybe someone else has answered this but I could not find this solution anywhere... It turned out to be the columnLock.css was overriding all css to make the overflow hidden. Of course this is required for the locked grid but not all grids on the screen in other tabs.

To fix this I removed the following:

.x-grid3-viewport, .x-grid3-locked{
overflow:hidden;
position:absolute;
}

And replaced this with the following:

.x-panel-body .x-panel-body-noborder .xedit-grid .x-grid3 .x-grid3-viewport, .x-panel-body .x-panel-body-noborder .xedit-grid .x-grid3 .x-grid3-locked {
overflow:hidden;
position:absolute;
}

This tightened up the css rules to only apply this to a locked Editor Grid.

mapo
21 May 2009, 11:42 AM
Hi,

here a solution to a pretty specific problem, which I hope will be of any use to somebody else.

I wanted to use a Locking Grid with a Grid Summary, but I was faced with two problems:
1) the full summary was shown in the unlocked grid only
2) the summary didn't scroll

1) is not a big issue for me, I'll leave it to somebody else ;)
In any case I had to remove the summary cells for the locked colums first. I did like this: in the "calculate" and "renderSummary" GridSummary's records, I simply added


if (cf.locked === true) continue;

to skip locked records when the summary's data model is created.

2) Is a bit more tricky. LockingGridView actually renders two aligned grid views: the locked one and the unlocked one. The summary is rendered in the unlocked one (as we saw in 1) ), and since this is re-defined in columLock.css to be position:absolute, the summary does not scroll. So I had to remove the absolute positioning (make it relative) and change the LockingGridView's code everywhere an alignment was necessary.

To place the unlocked view relative to the locked one edit columnLock.css and replace


.x-grid3-viewport, .x-grid3-locked{
overflow:hidden;
position:absolute;
}


with


.x-grid3-viewport{
overflow:hidden;
}
.x-grid3-locked{
overflow:hidden;
position:absolute;
}


To position the unlocked view relative to the locked view's top right corner edit olumnock.js and substitute any call to


this.mainWrap.dom.style.left=...

with


this.mainWrap.alignTo(this.lockedScroller, 'tr', [0, -1 * this.lockedHd.getBox().height]);

PS: this solves the issue discussed in the preceding post #234 as well.

Tested in FF3 only.

Hope it helps.

peacock
25 May 2009, 7:41 AM
if GridPanel have view(Ext.grid.GroupingView), LockingGridPanel can not work, please check it:)

ghutchens
29 May 2009, 10:31 AM
The following deprecated functions was removed from the ColumnModel.js file in 3.0.

,getLockedCount : function(){
var c = 0;
for(var i = 0, len = this.config.length; i < len; i++){
if(this.isLocked(i)){
c++;
}
}
return c;
}
// deprecated - to be removed
,isLocked : function(colIndex){
return this.config[colIndex].locked === true;
}

// deprecated - to be removed
,setLocked : function(colIndex, value, suppressEvent){
if(this.isLocked(colIndex) == value){
return;
}
this.config[colIndex].locked = value;
if(!suppressEvent){
this.fireEvent("columnlockchange", this, colIndex, value);
}
}
They need to be added to the columnlock.js at the end.

Ext.extend(Ext.grid.LockingColumnModel, Ext.grid.ColumnModel, {
getTotalLockedWidth : function(){
var totalWidth = 0;
for(var i = 0; i < this.config.length; i++){
if(this.isLocked(i) && !this.isHidden(i)){
totalWidth += this.getColumnWidth(i);
}
}
return totalWidth;
}
,getLockedCount : function(){
var c = 0;
for(var i = 0, len = this.config.length; i < len; i++){
if(this.isLocked(i)){
c++;
}
}
return c;
}
// deprecated - to be removed
,isLocked : function(colIndex){
return this.config[colIndex].locked === true;
}

// deprecated - to be removed
,setLocked : function(colIndex, value, suppressEvent){
if(this.isLocked(colIndex) == value){
return;
}
this.config[colIndex].locked = value;
if(!suppressEvent){
this.fireEvent("columnlockchange", this, colIndex, value);
}
}
});

rule3
9 Jun 2009, 11:49 AM
This not work with my Ext.data.Store but with Ext.data.Simple store it will work but reason will be my Ext.data.Stroe haves ever 30 columns becase with your simple store example column header is not equal in width with rows..

dewoob
16 Jun 2009, 5:58 AM
Hello MeDavid, Condor and all contributors,

thank you very much for sharing this great piece of work!

I've got one little problem with the LockedGroupHeaderGrid: Hiding a column (using checkboxes in the column header menu) seems not to affect the rows config for grouped headers. So, all additional rows of column headers get out of sync with the grid. I'd like to somehow add a listener that reacts when hiding / showing a column so that I could remove or re-add the column (resp. alter the colspan value) in the additional header rows, but I don't know how to do this. Maybe someone has a better idea or some hints for me (which event to listen to, how to reference the additional header rows, etc). Thank you in advance.

dewoob

zaunaf
16 Jun 2009, 7:04 AM
Hi all.. very nice plugin you guys have here. Especially for mapo, thanks i find your solution match with my problem now. I've read your clues, and apply it to my project :



..
To position the unlocked view relative to the locked view's top right corner edit olumnock.js and substitute any call to


this.mainWrap.dom.style.left=...with


this.mainWrap.alignTo(this.lockedScroller, 'tr', [0, -1 * this.lockedHd.getBox().height]);



however the summary rows is still misplaced, about 2 (locked) columns width from it should. See this :
http://www.imagecross.com/11/image-hosting-view-03.php?id=3676summary.JPG

Would you or anyone point out which part of the codes i should tweak, is it gridsummary.js or columnlock.js.. Thank you ...

jamiro
30 Jun 2009, 4:02 AM
Hi. It's a nice extension and very useful, but, i think, i found a bug:
- after reconfigure grid - column with property locked= true - not rendered.
Have anyone this problem?

p.s. Extjs version - 2.2.1.

rule3
4 Jul 2009, 9:58 AM
Locking Grid not work if there is column before locked column.

SORRY: Happens if first column is aligned to right

rule3
5 Jul 2009, 9:02 AM
I am not sure is this EditorLockingGrid problem but Comboboxes with AJAX store do not render selected data.. I heve script that renders ( missing ) if compobox items not found from database with ID. So at first AJAX load all comboboxes renders ( missing ) and when I press refresh then correct content is loaded to combos.

Second thing in EditorGrid thing is that if I scroll to right and try to edit some cell scroll jumps to start point (to left) and opens wrong cell to edit.

Anyone knows how to fix these..

roderick.wu
20 Jul 2009, 7:44 AM
Hi, Condor and all, do you have any ideas for many columns error as tinnt mentioned?



I test your link with IE6, it has some error with IE but it work normally, do not pay attention to this error, do not click on the grid cell, just move the bottom scrollbar to the rightmost, you will see the columns header and grid's data are not lining up, and i cannot see the rest of columns, I don't know what happen if the number of columns is so large (or does the LockingGrid class has some issue?). Can you show me?

Sorry for my English :). Thank you very much.

navdimri
22 Jul 2009, 4:14 AM
Hi All,

Has anyone got the solution of : How to use columnLock.js with ExtJS 3.0 environment
I added below code inside my columnLock.js file, at the end, but it didn't work.




Ext.extend(Ext.grid.LockingColumnModel, Ext.grid.ColumnModel, {
getTotalLockedWidth : function(){
var totalWidth = 0;
for(var i = 0; i < this.config.length; i++){
if(this.isLocked(i) && !this.isHidden(i)){
totalWidth += this.getColumnWidth(i);
}
}
return totalWidth;
},
getLockedCount : function(){
var c = 0;
for(var i = 0, len = this.config.length; i < len; i++){
if(this.isLocked(i)){
c++;
}
}
return c;
}
});



I need to solve this problem urgently.

Please help me out.

Thanks,
navdimri

Condor
22 Jul 2009, 4:26 AM
I'm currently working on a LockedGridView for Ext 3.0, but I have very little time to spare for it, so it's going to take a few more days.

navdimri
22 Jul 2009, 4:35 AM
Thanks Condor,

I am waiting for your solution.

Regards,
navdimri

roderick.wu
22 Jul 2009, 5:18 AM
I am using the lockedEditGridPanel, if I lock n columns, then the last n columns of the grid title will disppear. Another issue is when double click the cell to edit, the cell to modify is not the cell I click, it's n columns right to the cell I click. It's urgent issue, anybody resolved such issues?

Condor
22 Jul 2009, 5:23 AM
Are you using the latest LockingGridView code?

I thought I fixed those problems in the latest version (update 5)...

roderick.wu
22 Jul 2009, 5:31 AM
Hi, Condor, thanks for your quick response. I am using update 4 with Ext 2.1. From the earlier replies, it seems update 5 is for Ext 2.2 or upper version. anyway, i will take a try of update 5.