Results 1 to 5 of 5

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    12

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

    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.
    Code:
        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:
    Code:
        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:

    Code:
        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

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    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)
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    12

    Default

    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?

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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.

  5. #5

    Default News?

    Hi All,
    any news on this?
    Thanks in advance

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •