PDA

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



mazhar.shaikh
9 Jun 2013, 6:58 PM
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
10 Jun 2013, 2:04 AM
Same problem here. Is there a solution please?

oilid
11 Jun 2013, 2:16 AM
For me this issue is important and a showstopper upgrading to 4.2...

Is there a solution or workaround?

Thanks,
Oilid

slemmon
11 Jun 2013, 1:22 PM
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
6 Jul 2013, 6:41 AM
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
6 Jul 2013, 12:31 PM
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
8 Jul 2013, 7:51 PM
You are correct. That's what it is. Appreciate your efforts.

Thanks

zzem77
12 Jul 2013, 1:28 AM
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
30 Sep 2013, 4:44 PM
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<
20 Nov 2014, 3:10 AM
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
});
}
}
})