View Full Version : Locked column in a grid with cell editing

4 Nov 2011, 5:59 AM

Ext version tested:

Ext 4.0.7

Browser versions tested against:

FF 7.0.1


If you configure a grid with a locked column and have cell editing it returns a grid.headerCt undefined error

Steps to reproduce the problem:

Click to enter edit mode on a cell. Hit tab to navigate to the next cell.

The result that was expected:

It would open the editor on the next cell, which it does when there are no locked columns.

The result that occurs instead:

It moves the selection of the cell over, but does not enter edit mode and sometimes but no always returns a grid.headerCt undefined error.

Test Case:

Code is the grid cell editing example by sencha with one line added for the locked: true on one of the columns.


This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

enabled: true
Ext.Loader.setPath('Ext.ux', '../ux');



function formatDate(value){
return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';

Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// 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'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}

// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
sorters: [{
property: 'common',

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1

// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
locked: true,
flex: 1,
editor: {
allowBlank: false
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
lazyRender: true,
listClass: 'x-combo-list-small'
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 55
selModel: {
selType: 'cellmodel'
renderTo: 'editor-grid',
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
tbar: [{
text: 'Add Plant',
handler : function(){
// Create a model instance
var r = Ext.create('Plant', {
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availDate: Ext.Date.clearTime(new Date()),
indoor: false
store.insert(0, r);
cellEditing.startEditByPosition({row: 0, column: 0});
plugins: [cellEditing]

// manually trigger the data store load
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK


Operating Systems

WinXP Pro


10 Nov 2011, 6:21 AM
It would be nice to see an acknowledgement of this bug after going to the effort to report it.

15 Nov 2011, 12:56 AM
Experiencing same exact issue.

In addition movement between the editable columns behind the locked columns using TAB button is not working!

Running ExtJS 4.0.7, WinXP:
Firebug 1.8.4 on FF 8.0 returns - "grid.headerCt is undefined"
Chrome returns - "Uncaught TypeError: Cannot call method 'getHeaderAtIndex' of undefined"

Any solution would be appreciated!

Jelmer Baas
22 May 2012, 2:11 AM
I finally managed to get my dynamic grid working with locked columns (by manually looping), and I'm experiencing this problem now, too.

Would it not be possible to manually add the cellediting plugin to grid.normalGrid.plugins? I tried this, but it didn't get any event handlers.

7 May 2013, 1:30 AM
Hi jelmer,

I am also facing the same issue, Can you please let me know what exactly you did to solve the problem.

How did you set the focus from last locked column to the first unlocked column,

Please let me know what you did.

Jelmer Baas
8 May 2013, 12:17 AM

As you can see this issue is more than a year old, and no one from Sencha bothered to respond (same with my other question - why am I a Premium Member, again?), so we ignored the issue and found another way.

Sorry for not being able to help.