1. #1
    Sencha User
    Join Date
    Feb 2013
    Location
    NZ
    Posts
    74
    Answers
    5
    Vote Rating
    0
    mazhar.shaikh is on a distinguished road

      0  

    Default Answered: Uncaught TypeError: Cannot call method 'getVisibleIndex' of undefined. Upgrade issues

    Answered: Uncaught TypeError: Cannot call method 'getVisibleIndex' of undefined. Upgrade issues


    Hi,

    I recently upgraded my ExtJS project from 4.1 to latest version 4.2 as well Architect Build version to 2.2.2.
    After upgrade a few unusual things are happening which didn't happen before.

    I have a grid panel with a NumberField Column that used to be editable. But I can no longer use the up down arrows to change the number. Doesn't do anything. Although I can type in a number.

    After a few attempts to click on the arrows on the numberfield, i get this error
    Uncaught TypeError: Cannot call method 'getVisibleIndex' of undefined
    Following is the code for my Grid Panel with the column in bold I am referring to.
    Approved Qty
    is the field that I am talking about.
    Code:
    {                    xtype: 'gridpanel',
                        flex: 1,
                        id: 'eventItems',
                        itemId: '',
                        title: 'Approved And Not Yet Completed Events',
                        enableColumnMove: false,
                        forceFit: false,
                        store: 'BuyingPromo.AllocItem',
                        columns: [
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'supplier',
                                text: 'Supplier'
                            },
                            {
                                xtype: 'gridcolumn',
                                width: 58,
                                dataIndex: 'cat1',
                                text: 'Cat1'
                            },
                            {
                                xtype: 'gridcolumn',
                                width: 59,
                                dataIndex: 'scat',
                                text: 'SCat'
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'itemCode',
                                text: 'Item Code'
                            },
                            {
                                xtype: 'gridcolumn',
                                width: 154,
                                dataIndex: 'itemDesc',
                                text: 'Description'
                            },
                            {
                                xtype: 'numbercolumn',
                                dataIndex: 'cost',
                                text: 'Cost'
                            },
                            {
                                xtype: 'numbercolumn',
                                width: 68,
                                dataIndex: 'soh',
                                text: 'SOH',
                                format: '0,000'
                            },
                            {
                                xtype: 'numbercolumn',
                                dataIndex: 'orderAlloc',
                                text: 'Orig Alloc',
                                format: '0,000'
                            },
                            {
                                xtype: 'numbercolumn',
                                dataIndex: 'orderApproved',
                                text: '<b>Approved Qty</b>',
                                format: '0,000',
                                editor: {
                                    xtype: 'numberfield',
                                    id: 'approvedQtyNumberField',
                                    selectOnFocus: true,
                                    spinDownEnabled: false,
                                    spinUpEnabled: false,
                                    decimalPrecision: 0,
                                    maxValue: 32000,
                                    minValue: 0
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'packType',
                                text: 'Pack'
                            },
                            {
                                xtype: 'numbercolumn',
                                dataIndex: 'totalCost',
                                text: 'Total Cost'
                            },
                            {
                                xtype: 'booleancolumn',
                                dataIndex: 'isApproved',
                                text: '<b>Approved</b>',
                                editor: {
                                    xtype: 'checkboxfield',
                                    boxLabel: ''
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'importance',
                                text: 'Importance'
                            },
                            {
                                xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    metaData.tdAttr = 'data-qtip="' + value + '"';
                                    return value;
                                },
                                dataIndex: 'itemComments',
                                text: 'Comments'
                            }
                        ],
                        viewConfig: {
                            id: 'eventDetailView',
                            enableTextSelection: true
                        },
                        selModel: Ext.create('Ext.selection.CellModel', {
    
    
                        }),
                        plugins: [
                            Ext.create('Ext.grid.plugin.CellEditing', {
                                clicksToEdit: 1
                            })
                        ]
                    }
    Attached as well is the screenshot of the error and my screen.Capture.jpg

  2. OMG!!!
    It cost me hours to find the problem: I have Checked my code from beginning to the end, checked the model, the response data, the handlers, the grid and column configs, possible spelling mistakes, and even copy my code line by line to thelocking-editing-grid.js Example and preview it in the browser(Because the example works!). And finally I got it:
    viewConfig: {
    enableTextSelection: true
    }
    Just REMOVE the enableTextSelection: true config.
    Maybe we can not selecte the text and edit it at the same time, or maybe it's a bug.

  3. #2
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    oilid is on a distinguished road

      0  

    Default


    Same problem here. Is there a solution please?

  4. #3
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    oilid is on a distinguished road

      0  

    Default


    For me this issue is important and a showstopper upgrading to 4.2...

    Is there a solution or workaround?

    Thanks,
    Oilid

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Answers
    442
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    spinDownEnabled: false and spinUpEnabled: false will prevent the spinner from nudging the value up / down via the triggers, but also keypress. Are you wanting to allow users to nudge the value up / down with the up / down arrows, but not the triggers?
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  6. #5
    Sencha User
    Join Date
    Jul 2013
    Posts
    2
    Answers
    1
    Vote Rating
    1
    hustcer is on a distinguished road

      0  

    Default


    We have the same problem in Extjs 4.2.1. Generally speaking, after clicking the cell to edit it, and click some other cells, then click back, the cell was not editable anymore and raised the error message: 'Uncaught TypeError: Cannot call method 'getVisibleIndex' of undefined'.
    It seemed to be a bug. Any one have a solution?

  7. #6
    Sencha User
    Join Date
    Jul 2013
    Posts
    2
    Answers
    1
    Vote Rating
    1
    hustcer is on a distinguished road

      1  

    Default


    OMG!!!
    It cost me hours to find the problem: I have Checked my code from beginning to the end, checked the model, the response data, the handlers, the grid and column configs, possible spelling mistakes, and even copy my code line by line to thelocking-editing-grid.js Example and preview it in the browser(Because the example works!). And finally I got it:
    viewConfig: {
    enableTextSelection: true
    }
    Just REMOVE the enableTextSelection: true config.
    Maybe we can not selecte the text and edit it at the same time, or maybe it's a bug.

  8. #7
    Sencha User
    Join Date
    Feb 2013
    Location
    NZ
    Posts
    74
    Answers
    5
    Vote Rating
    0
    mazhar.shaikh is on a distinguished road

      0  

    Default


    You are correct. That's what it is. Appreciate your efforts.

    Thanks

  9. #8
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    1
    Vote Rating
    0
    zzem77 is on a distinguished road

      0  

    Default


    The following is the code I added.
    It works for me.

    Thank you.

    Code:
    Ext.override(Ext.selection.CellModel, {
    
        onMouseDown: function(view, cell, cellIndex, record, row, recordIndex, e) {
    
            // Added - Change cellIndex value
            if (view.enableTextSelection && cellIndex === -1) {
                cellIndex = cell.cellIndex;
            }
    
            // Record index will be -1 if the clicked record is a metadata record and not selectable
            if (recordIndex !== -1) {
                this.setCurrentPosition({
                    view: view,
                    row: row,
                    column: cellIndex
                });
            }
        }
    })

  10. #9
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
    kpandya is on a distinguished road

      0  

    Default


    Quote Originally Posted by hustcer View Post
    OMG!!!
    It cost me hours to find the problem: I have Checked my code from beginning to the end, checked the model, the response data, the handlers, the grid and column configs, possible spelling mistakes, and even copy my code line by line to thelocking-editing-grid.js Example and preview it in the browser(Because the example works!). And finally I got it:
    viewConfig: {
    enableTextSelection: true
    }
    Just REMOVE the enableTextSelection: true config.
    Maybe we can not selecte the text and edit it at the same time, or maybe it's a bug.
    Excellent. Exact same problem. Exact same solution. Thank you hustcer.