View Full Version : [FIXED-505][3.1.1-beta] Grid/Combo keyboard navigation bug

30 Jan 2010, 4:49 AM
Ext version tested:

Ext 3.1.1-beta w. no overrides

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

IE8 v. 8.0.6001.18865
FF 3.5.7 (firebug 1.5.0 installed)
Safari 4.0.4
Opera 9.64

Operating System:

Windows Vista


In the test case below there is an EditorGridPanel with a column with a ComboBox editor. As per documentation, I use a renderer to show the combo displayField when the editor is not active.
The problem is this: you start typing in the combo until a suitable value has completed and then hit TAB to move to the next column. It seems that the renderer can't find the record.
This test case works in 3.1.0, and fails in 3.1.1-beta.
If you remove the RowSelectionModel from the grid config, it works as expected.
If you use the mouse to select a value from the combo drop-down it also works.

Test Case:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Combo/Grid problem</title>

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

<!-- overrides to base library -->

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

<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.util.Format.comboRenderer = function(combo) {
return function(value){
var record = combo.findRecord(combo.valueField, value);
return (record ? record.get(combo.displayField) : "hmm - not found?!");

var colorStore = new Ext.data.ArrayStore({
fields: [{name:'id'}, {name: 'color'}],
data: [[1, 'Red'], [2, 'Green'], [3, 'Blue'], [4, 'Yellow']]

var gridStore = new Ext.data.ArrayStore({
fields: [ {name: "color_id"}, {name: "f1"}, {name: "f2"} ]

var colorCombo = new Ext.form.ComboBox({
store: colorStore,
lazyRender: true,
mode: 'local',
typeAhead: true,
triggerAction: 'all',
valueField: 'id',
displayField: 'color'

var myGrid = new Ext.grid.EditorGridPanel({
selModel: new Ext.grid.RowSelectionModel(),
store: gridStore,
tbar: [{
text: "Add item",
handler: function(btn, ev) {
gridStore.add(new gridStore.recordType());
columns: [
header: 'Color', dataIndex: 'color_id', editor: colorCombo,
renderer: Ext.util.Format.comboRenderer(colorCombo)
{ header: 'F1', dataIndex: 'f1', editor: {xtype: 'textfield'} },
{ header: 'F2', dataIndex: 'f2', editor: {xtype: 'textfield'} }

myGrid.getView().addListener('rowsinserted', function(view, firstRow, lastRow) {
this.startEditing(firstRow, 0);
}, myGrid);

Ext.onReady(function() {
new Ext.Viewport({
layout: 'fit',
items: myGrid
Steps to reproduce the problem:

save the test case in a subdirectory under the SDK examples directory. Then load the page.
click the "Add item" toolbar button
hit 'r' to complete the color 'Red' in the ComboBox
hit TAB to move to the next column.

The result that was expected:

The ComboBox shows the value 'Red'

The result that occurs instead:

The ComboBox shows "hmm - not found?!".

Screenshot or Video:


Debugging already done:


Possible fix:

not provided

Jamie Avins
4 Mar 2010, 5:57 PM
[type]: fix
[module]: Editor/Combo
[id]: #505
[desc]: Fixes #505. The Editor wrapping class will now call combo's assertValue on completeEdit. Combo's assertValue is not more specific on it's onSelect check (display AND this.value must be set).