PDA

View Full Version : [FIXED] extjs4.2.0: dbl click a row will deselect the row with allowDeselect: true



jimmylu98
4 Apr 2013, 6:24 AM
See attached simple test code with single selection mode. tested with FF and Chrome.

1st click a row, will select the row, 2nd click the same row, will deselect the row.
It means dbl click a row will not be able to see the row selected.

In extjs 3.x.x with single selection mode, click a row will select that row, no matter how many clicks. Use Ctrl-Click to deselect a selected row.



Ext.onReady(function() {
Ext.QuickTips.init();

// 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'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

// create the data store
var store = Ext.create('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'}
],
data: myData
});

// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: store,
columns: [
{
text : 'Company',
flex: 4,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
flex: 2,
sortable : true,
dataIndex: 'price'
},
{
text : 'pctChange',
flex: 2,
sortable : true,
dataIndex: 'pctChange'
},
{
text : 'Change',
flex: 2,
sortable : true,
dataIndex: 'change'
}
],
columnLines: true,
height: 350,
width: 600,
title: 'Array Grid',
renderTo: Ext.getBody(),
viewConfig: { stripeRows: true },
selModel: { allowDeselect: true }
});


});




*EDIT BY SLEMMON
3.4 example used
Tested in Chrome 26


Ext.QuickTips.init();


// 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'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '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'}
],
data: myData
});


// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: 'Change', dataIndex: 'change'},
{header: '% Change', dataIndex: 'pctChange'},
// instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
{
header: 'Last Updated', width: 135, dataIndex: 'lastChange',
xtype: 'datecolumn', format: 'M d, Y'
}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: document.body
});

slemmon
4 Apr 2013, 9:06 AM
Thanks for the report! I have opened a bug in our bug tracker.

igoberman
10 Apr 2013, 7:48 AM
Yes, this is a bit annoying bug. Double clicking on the row currently will return the grid row to the state it was in:

if selected before click, it will stay selected
if not selected before click it will stay unselected.
The annoying part is that the row will "blink" when selection is toggled before clicks, creating undesired visual effect.
As jimmylu98 (http://www.sencha.com/forum/member.php?283389-jimmylu98) said, double click should probably select unselected row after first click and keep it selected after the subsequent clicks. If row is selected, double click should just keep the selection (do not unselect row after the first or subsequent clicks).

igoberman
10 Apr 2013, 11:10 AM
I found a quick and dirty fix to keep the selection if double click was done on the 'unselected' row. This fix is obviously ExtJS version specific - I tested it with 4.2.0 GA.
It does not address the 'blinking' problem that occurs when double clicking a selected row.



grid.getSelectionModel().onRowMouseDown = function (view, record, item, index, e) {
var me = this;


// Record index will be -1 if the clicked record is a metadata record and not selectable
if (index !== -1) {
// is second click in double click? if row selected, do not deselect.
if (new Date().getTime() - me.lastMousedown < 300 && me.isSelected(record)) {
me.mousedownAction = true;
}
else {
if (!me.isSelected(record)) {
me.mousedownAction = true;
me.processSelection(view, record, item, index, e);
}
else {
me.mousedownAction = false;
}
}
}


me.lastMousedown = new Date().getTime();
};