PDA

View Full Version : ComboBox grid editor TAB key problem



ExtMore
14 Aug 2009, 1:55 PM
Hi,

I am having some problems with using ComboBox as grid editor. I am trying to make a grid for data entry, but I have problems with getting the TAB key working properly with ComboBox columns. Not only does it not behave as I would have expected, but it behaves differently in different browsers..

Here's an example app:


<html>
<head>
<title>Combo test</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css (http://extjs.com/forum/view-source:http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css)" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base-debug.js (http://extjs.com/forum/view-source:http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base.js)"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all-debug.js (http://extjs.com/forum/view-source:http://extjs.cachefly.net/ext-3.0.0/ext-all.js)"></script>
<script type="text/javascript">
Ext.onReady(function() {
var aStore = new Ext.data.ArrayStore({
fields: ['col1','col2','col3'],
data: [['ASDFSF', 'Red', '4'],['QWERTY', 'Blue', '6'],['ZXCVBN', 'Green', '8']]
});

new Ext.Viewport({
layout: "fit",
items: [
{
xtype: "editorgrid", store: aStore, clicksToEdit: 1,
columns: [
{
header: 'Column 1', dataIndex: 'col1',
editor: {xtype: 'textfield', selectOnFocus: true}
},
{
header: 'Column 2', dataIndex: 'col2',
editor: {
xtype: 'combo',
store: ['Red', 'Green', 'Blue', 'Yellow'],
typeAhead: true,
triggerAction: 'all',
emptyText:'Select color',
selectOnFocus:true
}
},
{
header: 'Column 3', dataIndex: 'col3',
editor: {xtype: 'textfield', selectOnFocus: true}
}
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>
To reproduce the problem, click once in a cell in column 1, the cell shows the text editor. Now hit TAB to move to the combo in column 2, and then hit, say, 'g' to complete 'Green'. Then hit TAB to move on to column 3. Now I would have expected column 3 to show a text editor. Various browsers behave differently:

Firefox 3.5.2:
When TAB out of the combo, the combo editor stays visible but the focus is "lost", ie. nothing apparently has the focus. If I hit TAB again then column 3 is highlighed but the text editor is not shown, and the combo editor in column 2 is still visible, but not in focus.

Safari 4.0.2:
Same scenario, but when tabbing out of the combo, then the column 3 text editor is shown, but the actual focus goes to the browser address line(!). So text which should have gone to column 3, actually goes to the browser address line.

Opera 9.64:
Here it actually works correctly (or at least as I expect).

I am quite new to ExtJS, so maybe there's something missing in my app?

Any help much appreciated -- thanks!

ExtMore
15 Aug 2009, 2:33 AM
Ooops -- had a trailing comma.. Fixed in the example code. Changes nothing in browser behaviour.

ExtMore
15 Aug 2009, 2:50 AM
Did some more tests:

IE8:
Works as expected.

Firefox 3.0.13:
Same behaviour as Firefox 3.5.2

Animal
15 Aug 2009, 4:30 AM
Navigation in EditorGridPanels has been undergoing a lot of work just over the past few days to fix a lot of probs like this.

So the next release should fix this.

tomalex0
26 Jun 2010, 4:41 AM
I know its an old post, but as i came across same problem, just need to know if it is fixed?.

Could i disable tab key operation in Editor Grid which which will be another solution.

I'm using Rowselection model for editor grid as i want drag option for rows.
Thanks in advance

Keylan
12 Jul 2010, 9:51 AM
I am also having issues with tabbing out of combo box columns in a grid panel. Has there been any update on this?