PDA

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



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

Ext 3.0.1


Adapter used:

ext
jquery


css used:

only default ext-all.css


Browser versions tested against:

IE8
FF3.5.2
Chrome 2.0


Operating System:

WinXP Pro


Description:

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:



<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.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
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 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
grid.render('grid-example');
});
</script>
</head>
<body>
<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" />
</body>
</html>


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:

none


Possible fix:

not provided

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