PDA

View Full Version : [NOREPRO] combo cell editor not working for columns after horinzontal scrolling



ypandey
6 Sep 2013, 1:12 AM
REQUIRED INFORMATION


Ext version tested:
ExtJS 4.2.1

Browser versions tested against:
IE 10

Description:
Unable to edit columns having combo editor, If columns comes after the horizontal scroll

Test Case:



Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone','work'],
data: {
'items': [{
"name": "Lisa",
"email": "[email protected]",
"phone": "555-111-1224",
"work": 0
}, {
"name": "Bart",
"email": "[email protected]",
"phone": "555-222-1234",
"work": 2
}, {
"name": "Homer",
"email": "[email protected]",
"phone": "555-222-1244",
"work": 1
}, {
"name": "Marge",
"email": "[email protected]",
"phone": "555-222-1254",
"work": 0
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
width: 100,
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
width: 100,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Work',
dataIndex: 'work',
width: 130,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
[0,'Engineer'],
[1,'Doctor'],
[2,'Lawyer']
],
lazyRender: true,
listClass: 'x-combo-list-small'
}
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
height: 200,
width: 200,
renderTo: Ext.getBody()
});
});

Steps to reproduce the problem:
Try to edit Work Column values

The result that occurs instead:
Focus shifts to the first column

Extra Info:
Works fine for ExtJS 4.2.0

evant
6 Sep 2013, 1:24 AM
I can't reproduce this on the latest nightly. Can you confirm?

ypandey
6 Sep 2013, 2:50 AM
ok! I try to elaborate more on How to reproduce?

Step 1. Using Windows Machine and IE 10 browser

Step 2. Trying above given code inside code editor of sencha doc or sencha try

Step 3. Try editing work column values. First time It goes into combo edit mode.. Fine!

Step 4. But if you try again editing another cell of that work column.

Observe: Grid view resets to first Column.

other observations:
1) It works fine if Work is first column instead.
2) It works fine for 4.2.0

Gary Schlosberg
6 Sep 2013, 5:20 AM
I afraid I can't recreate this either. Tried with IE10 in both Windows 7 and Windows 8.

Gary Schlosberg
6 Sep 2013, 5:28 AM
No wait, I got it, in both Windows 7 and Windows 8. You have to finish the edit using a click in another cell. Using 'enter' key doesn't trigger the issue.

That said, I tested against the latest nightly build and this is no longer an issue as of 4.2.2.1093. True for both Windows 7 and Windows 8.

ypandey
6 Sep 2013, 8:13 AM
Thank God you could reproduce..:)
I thought I will have to share a video 8-| Please change the status of the bug.
Could you provide some fix? Some method I could override to fix this issue in 4.2.1?
Thanks

Gary Schlosberg
6 Sep 2013, 9:28 AM
The status of the bug is still NOREPRO because it can't be reproduced in the latest version. As far as a workaround, 4.2.2 is due out this month (always subject to delay) so the fix is on the horizon. I don't know what update fixed this issue, so unfortunately I can't point you in the right direction. If you really need something fast, I suppose you could compare the latest nightly against 4.2.1 and try to construct an override, or hope that someone else drops by and posts one.

ypandey
6 Sep 2013, 10:41 AM
I got little closer to bug cause. :-?
Printing cellIndex value on cellmouseup and cellmousedown events


Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone','work'],
data: {
'items': [{
"name": "Lisa",
"email": "[email protected]",
"phone": "555-111-1224",
"work": 0
}, {
"name": "Bart",
"email": "[email protected]",
"phone": "555-222-1234",
"work": 2
}, {
"name": "Homer",
"email": "[email protected]",
"phone": "555-222-1244",
"work": 1
}, {
"name": "Marge",
"email": "[email protected]",
"phone": "555-222-1254",
"work": 0
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
width: 100,
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
width: 100,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Work',
dataIndex: 'work',
width: 130,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
[0,'Engineer'],
[1,'Doctor'],
[2,'Lawyer']
],
lazyRender: true,
listClass: 'x-combo-list-small'
}
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
height: 200,
width: 200,
listeners: {
cellmouseup: function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
console.log(cellIndex);
},
cellmousedown: function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
console.log(cellIndex);
}
},
renderTo: Ext.getBody()
});
});

Try This:
Step 1: Click 1st Row's Work Column
Console Output: 3 and 3 (Perfect)
Step 2: Click 2nd Row's Work Column
Console Output: 3 and 0 (Oops)

It looks like cellmouseup event is giving wrong column index.
So I used cellmousedown event to manually start cell editing.


Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone','work'],
data: {
'items': [{
"name": "Lisa",
"email": "[email protected]",
"phone": "555-111-1224",
"work": 0
}, {
"name": "Bart",
"email": "[email protected]",
"phone": "555-222-1234",
"work": 2
}, {
"name": "Homer",
"email": "[email protected]",
"phone": "555-222-1244",
"work": 1
}, {
"name": "Marge",
"email": "[email protected]",
"phone": "555-222-1254",
"work": 0
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
width: 100,
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
width: 100,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Work',
dataIndex: 'work',
width: 130,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
[0,'Engineer'],
[1,'Doctor'],
[2,'Lawyer']
],
lazyRender: true,
listClass: 'x-combo-list-small'
}
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
height: 200,
width: 200,
listeners: {
cellmousedown: function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
grid.editingPlugin.startEditByPosition({row: rowIndex, column: cellIndex});
return false;
}
},
renderTo: Ext.getBody()
});
});

And now it works perfectly\:D/
Thanks.

Gary Schlosberg
6 Sep 2013, 3:44 PM
Glad you found a workaround! Thanks for sharing it with the community.