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

[mazhar.shaikh]

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.

{ 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.44254

[oilid]

Same problem here. Is there a solution please?

[oilid]

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

Is there a solution or workaround?

Thanks,
Oilid

[slemmon]

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?

[hustcer]

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?

[hustcer]

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 the locking-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.:((

[mazhar.shaikh]

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

Thanks

[zzem77]

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

Thank you.


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
});
}
}
})

[kpandya]

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.

[>Mikhail<]

Thank you, man. You have saved a lot of time for me! It does work.




...


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
});
}
}
})