View Full Version : Locking EXT grid column does not work on 3.3.1

17 Jun 2011, 12:08 PM
I am using "Ext.ux.grid.LockingColumnModel" to lock some columns for scrolling (Those columns that are locked, will always be locked and seen when scrolling the grid). But only columns that are locked are shown in the grid; This was working on earlier releases of EXTJS.

In the following example, only columns 'company' and 'usMoney' are shown:

Thanks / Reza



// sample static data for the store
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']

* Custom function used for column renderer
* @param {Object} val
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;

* Custom function used for column renderer
* @param {Object} val
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.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
data: myData });

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

// render the grid to the specified div in the page

19 Jun 2011, 1:48 PM
Please use code tags when posting code.

Can you confirm which browsers you've tried and which version of the UX you have (just take a look at the copyright header). The UX version must match the ExtJS version. The demo for this works fine for 3.3.1 and 3.4.0:


Suggest you grab the right version of the UX if you don't have it.

20 Jun 2011, 7:56 AM
Thank you for your reply. Now it is working. After checking the html example in your reply, I noticed that the "RowEditor.css" was not referenced correctly in my .jsp file. I fixed it and it works perfectly now.

Thank you for your help again.

18 Jul 2011, 5:38 AM
Hi mrrezayam,

From this thread, I got the impression that you are using both RowEditor and LockingColumnModel in the same grid, and both extension works well right?

I'm currently having some issue when using both extension, and I'm just wondering if both extension work together or not.


18 Jul 2011, 7:07 PM
Hi Donny:

I am using lock column extension recently. I remember I tested both extensions a while ago and they were working but I did not like the way it was working for updates.

What are your issues?


20 Jul 2011, 10:55 AM
UPDATE JULY 21, 2011:
It seems like my code is working on version 3.2.1 just fine. Maybe it didn't compile correctly on the first place. However, there are some incompatibility in LockingGridView version 3.2.1 and RowEditor.

Hi Reza,

My EXT core is on version 3.2.1. I tested my code using LockingGridView version 3.2.1 (I got it from this thread (http://www.sencha.com/forum/showthread.php?99199-Locking-gridView-issue-in-3.2.1)), and version 3.3.0.

On both tests, the LockingGridView run on IE 8, but it did not run on FireFox 3.6.18.

The error message I got from FireBug says:
"this.mainBody is undefined"

The error is on the red line as shown below, and that's the LockingGridView.js file.

refresh : function(headersToo){
this.fireEvent('beforerefresh', this);
var result = this.renderBody();
if(headersToo === true){
this.processRows(0, true);
this.fireEvent('refresh', this);

Thanks for your help Reza.


25 Jul 2011, 7:24 PM
Hi Donny:

I am using EXT3.3.1 an it works on firefox 4.0. You may want to use 3.3.1 and see if it works.

Thanks / Reza