ExtJS 4.0.7/4.1.0/4.1.1 Cell Editing and Grid Locking produces errors

[zero10]

REQUIRED INFORMATION
Ext version tested:

• Ext 4.0.7
• Ext 4.1.0
• Ext 4.1.1

Browser versions tested against:

• Chrome 19.0.1084.56
• FireFox 12.0 with FireBug 1.9.2

Description:

• When using cell editors and enabling locking on a grid you get an error: Cannot call method 'getIndex' of undefined. This occurs when you have zero locked columns and are editing one cell and attempt to tab to the next. Also, if you lock at least one column then attempt to tab around it does not work, the cursor remains in the current cell.

Steps to reproduce the problem:

• Using the sample code below load the page, then ensure that zero columns are locked
• Double click in a cell to edit it
• Press tab to move to the next cell

The result that was expected:

• The cursor should move to the next cell

The result that occurs instead:

• An error is produced: Cannot call method 'getIndex' of undefined

Test Case:I am experiencing this in a much more complicated project, but I was able to modify one of the provided examples to duplicate the problem. There is probably some unnecessary code in here but it does serve to duplicate the problem for me.

    Ext.require([    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);


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


    // 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 = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price'},
           {name: 'change'},
           {name: 'pctChange'},
           {name: 'lastChange'}
        ],
        data: myData
    });


    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns: [{
            text     : 'Company<br>Name', // Two line header! Test header height synchronization!
            locked   : true,
            width    : 200,
            sortable : false,
            dataIndex: 'company',
            editor: {
                xtype: 'textarea'
            }
        },{
            text     : 'Price',
            width    : 125,
            sortable : true,
            dataIndex: 'price',
            editor: {
                xtype: 'textarea'
            }
        },{
            text     : 'Change',
            width    : 125,
            sortable : true,
            dataIndex: 'change',
            editor: {
                xtype: 'textarea'
            }
        },{
            text     : '% Change',
            width    : 125,
            sortable : true,
            dataIndex: 'pctChange',
            editor: {
                xtype: 'textarea'
            }
        },{
            text     : 'Last Updated',
            width    : 135,
            sortable : true,
            dataIndex: 'lastChange',
            editor: {
                xtype: 'textarea'
            }
        }],
        height: 350,
        width: 600,
        title: 'Locking Grid Column',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        },
        plugins: [{ 
            ptype: 'cellediting',
            clicksToEdit: 2
        }]
    });
});

HELPFUL INFORMATION
Debugging already done:

• Checked out the getLastVisibleColumnIndex call that seems to be failing

Currently it reads like this:

    getLastVisibleColumnIndex: function() {
        var visHeaders = this.getHeaderCt().getVisibleGridColumns(),
            lastHeader = visHeaders[visHeaders.length - 1];
        return lastHeader.getIndex(); 
    },

I modified it to look like this to prevent the first error:

    getLastVisibleColumnIndex: function() {
        var visHeaders = this.getHeaderCt().getVisibleGridColumns(),
            lastHeader = visHeaders[visHeaders.length - 1];
        if (Ext.isDefined(lastHeader)) { 
            return lastHeader.getIndex(); 
        }
        return -1;
    },

However then you are left with no errors being thrown but the cursor does not move around. It seems like this problem stems from there being 2 views and all of the connecting code not keeping track of which view it should be operating in.
Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Windows 7

[mitchellsimoens]

Using your provided test case with 4.1.1 I do not get any errors and moves to the next cell in that grid (note that when one or more columns are locked, you have 2 grids present)

[zero10]

When one or more columns are locked the crash does not happen, but also it does not move to the next cell for me. Here is what I am getting when it does crash:js.png
Also, I just tested and if I try to tab around the locked columns it works properly, it is only the unlocked ones that are affected. Does this help you to reproduce the issue?

[Animal]

Yes, there were problems with editing in locked grids. There are two grids, but one selection model. But two plugins.....

I have a PR outstanding which fixes this.

[mimmo.rossi73]

Hi All,
any news on this?
Thanks in advance