View Full Version : [FIXED-210][Ext 3.0.1] RowSelectionModel "rowselect" event fire for cells in same row

31 Aug 2009, 12:48 PM
Ext version tested:

Ext 3.0.1

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

Chrome 2.0

Operating System:

WinXP Pro


A RowSelectionModel's "rowselect" and "rowdeselect" events fire when tabbing through editable cells in the same row. Clicking on the individual cells does not fire the events.

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

<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="extjs/ext-3.0.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-3.0.1/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

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: true

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

sm.on("rowselect", function () {
var el = document.getElementById("select-count"),
count = parseInt(el.value) || 0;
el.value = count + 1;

sm.on("rowdeselect", function () {
var el = document.getElementById("deselect-count"),
count = parseInt(el.value) || 0;
el.value = count + 1;

// render the grid to the specified div in the page
<div id="grid-example"></div>
Row select count: <input type="text" id="select-count" value="0" />
Row de-select count: <input type="text" id="deselect-count" value="0" />

Steps to reproduce the problem:

Click the first cell of the first row to edit the cell.
Press the TAB key multiple times to tab through all the cells in the first row.

The result that was expected:

The RowSelectionModel's "select" and "deselect" events should only fire when tabbing to the next row.

The result that occurs instead:

The RowSelectionModel's "select" and "deselect" events fire when tabbing through cells in the same row. Note that clicking each cell in the same row does not fire the "select" and "deselect" events.

Debugging already done:


Possible fix:

not provided

31 Aug 2009, 6:04 PM
Fix applied to svn in rev #5256 for patch release 3.0.2.