View Full Version : [OPEN] [FIXED-210][3.0.2] Tabbing to next row in editor grid does not deselect previous row

15 Sep 2009, 8:54 AM
Ext version tested:

Ext 3.0.2

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:


Operating System:

WinXP Pro


Tabbing through to the next grid row in an editable grid does not deselect the previous row when using RowSelectionModel with singleSelect set to false. Clicking on a cell in the next row does deselect the previous row as expected. In 3.0.0 and 3.0.1, tabbing to the next row would deselect the previous row. I'm guessing that this issue was caused by the fix for the following bug: http://www.extjs.com/forum/showthread.php?t=79158

Test Case:

<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.2/resources/css/ext-all.css" />

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

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

Ext.BLANK_IMAGE_URL = "extjs/ext-3.0.2/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

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

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


var sm = new Ext.grid.RowSelectionModel({
singleSelect: false

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,
sm: sm

// render the grid to the specified div in the page
<div id="grid-example"></div>

Steps to reproduce the problem:

Start editing the first cell in the first row.
Tab through all the editors in the first row until focus is set to the editor in the first cell of the second row.

The result that was expected:

The first row should be deselected.
The second row should be selected.

The result that occurs instead:

The first row remains selected.
The second row is also selected.

Debugging already done:


Possible fix:

not provided

15 Sep 2009, 6:47 PM
Fix applied to svn in rev #5357 for patch release 3.0.3.