PDA

View Full Version : [CLOSED][3.0.0] Selecting grid Combo item with Arrow+TAB causes grid to lose focus



paulcrowder
27 Aug 2009, 11:38 AM
Ext version tested:

Ext 3.0.0


Adapter used:

ext
jquery


css used:

only default ext-all.css


Browser versions tested against:

IE7
FF3.5.2 (firebug 1.4.0 installed)


Operating System:

WinXP Pro


Description:

When editing a grid cell with a ComboBox editor, using the up/down arrow keys to select an item, then pressing the TAB key causes the grid to lose focus.


Test Case:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grid Test</title>

<!-- ** CSS ** -->
<!-- base library -->
<link type="text/css" rel="stylesheet" href="extjs/ext-3.0.0/resources/css/ext-all.css" />

<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="extjs/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-3.0.0/ext-all.js"></script>

<!-- page specific -->
<script type="text/javascript">
Ext.onReady(function () {

Ext.BLANK_IMAGE_URL = "extjs/ext-3.0.0/resources/images/default/s.gif";

// sample static data for the store
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am']
];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// manually load local data
store.loadData(myData);

var comboData = [
['3m Co'],
['Alcoa Inc'],
['Altria Group Inc']
];

var comboStore = new Ext.data.ArrayStore({
fields: [
{name: 'company'}
]
});

comboStore.loadData(comboData);

var companyCombo = new Ext.form.ComboBox({
store: comboStore,
valueField: 'company',
displayField: 'company',
mode: 'local',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
listClass: 'x-combo-list-small'
});

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company', editor: companyCombo},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', editor: new Ext.form.TextField()},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change', editor: new Ext.form.TextField()},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange', editor: new Ext.form.TextField()},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', editor: new Ext.form.DateField()}
],
height: 350,
width: 600,
clicksToEdit: 1
});

// render the grid to the specified div in the page
grid.render('grid-example');
});
</script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>


Steps to reproduce the problem:

Single-click the first cell in the first row of the grid generated by the above code. The cell should be in edit mode using a ComboBox editor.
Press the Down arrow key to expand the ComboBox editor. Press the Down arrow key again to select the second item in the list.
Press the TAB key.


The result that was expected:

The cell's value should be set to the selected item.
The next editable cell should receive focus and be in edit mode.


The result that occurs instead:

The ComboBox cell remains in edit mode.
Focus moves out of the grid.


Debugging already done:

I noticed the grid code handles the editor's "specialkey" event, but in this case it appears that the "specialkey" event is never fired when the user presses the TAB key.


Possible fix:

not provided

mystix
27 Aug 2009, 7:25 PM
i just tested this in Safari 4.0.3 (WinXP) against SVN HEAD and the editorgrid example works just fine.

are you running off SVN HEAD, or are you still on the official 3.0.0 download?

paulcrowder
27 Aug 2009, 7:33 PM
Sorry, I didn't test it in Safari 4. That must have been left over from the template I used to file the bug. I've edited the original post to remove Safari 4 from the list of browsers I've tested with.

I'm still on the official 3.0.0 version.

mystix
27 Aug 2009, 8:33 PM
you should grab the 3.0.1 package from the support page.
there were some extensive fixes implemented to resolve various editorgrid keyboard nav issues.

your issue's definitely resolved by 3.0.1.

evant
27 Aug 2009, 9:24 PM
As Marc suggested, this should be fixed in 3.0.1, there was a fairly big overhaul to the key handling for editor grids (thanks Marc!).