PDA

View Full Version : prevent selection in actioncolumn



clifficious
24 Apr 2013, 7:57 AM
Hi,

I was wondering if there is a way to prevent the selection of a row when clicking the icon in the actioncolumn of a row. I spotted the 'stopSelection' option, but that does seem to have no effect.

Background is, that I have several data to display. When I click on the delete icon at the end of the row I want to prevent the data to be selected.

Thanks in advance!

slemmon
25 Apr 2013, 8:34 PM
Looks like that was a bug in 4.2, but seems it will be fixed in 4.2.1.

clifficious
25 Apr 2013, 11:07 PM
alright. Thanks for the information!

Frith
21 Jun 2013, 4:06 AM
stopSelection has no effect in 4.2.1

clifficious
21 Jun 2013, 4:22 AM
but the bug is fixed in 4.2.1 with actionColumns.

no idea about stopSelection.

slemmon
21 Jun 2013, 3:28 PM
stopSelection worked ok for me with the below example (in 4.2.1).
Clicking on the icon in the first column and it will select the row. Clicking on the icon in the second actionColumn will not select the row.



Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott"},
{firstname:"Dwight", lastname:"Schrute"},
{firstname:"Jim", lastname:"Halpert"},
{firstname:"Kevin", lastname:"Malone"},
{firstname:"Angela", lastname:"Martin"}
]
});


Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:30,
stopSelection: false,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit'
}]
},
{
xtype:'actioncolumn',
width:30,
// stopSelection: true, // TRUE IS THE DEFAULT
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit'
}]
}
],
width: 300,
renderTo: Ext.getBody()
});

watertrac_dev
13 Nov 2013, 7:19 PM
This override seems to patch the stopSelection bug in 4.2.0.


/**
* @class Watertrac.overrides.grid.column.Action
* @override Ext.grid.column.Action
*/
Ext.define('Watertrac.overrides.grid.column.Action', {
override: 'Ext.grid.column.Action',


/**
* @private
* Process and refire events routed from the GridView's processEvent method.
* Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
* Returns the event handler's status to allow canceling of GridView's bubbling process.
*/
processEvent: function (type, view, cell, recordIndex, cellIndex, e, record, row) {
var me = this,
target = e.getTarget(),
match,
item, fn,
key = type == 'keydown' && e.getKey(),
disabled;


// If the target was not within a cell (ie it's a keydown event from the View), then
// rely on the selection data injected by View.processUIEvent to grab the
// first action icon from the selected cell.
if (key && !Ext.fly(target).findParent(view.getCellSelector())) {
target = Ext.fly(cell).down('.' + Ext.baseCSSPrefix + 'action-col-icon', true);
}


// NOTE: The statement below tests the truthiness of an assignment.
if (target && (match = target.className.match(me.actionIdRe))) {
item = me.items[parseInt(match[1], 10)];
disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || me.origScope || me, view, recordIndex, cellIndex, item, record) : false);
if (item && !disabled) {
if (type == 'click' || (key == e.ENTER || key == e.SPACE)) {
fn = item.handler || me.handler;
if (fn) {
fn.call(item.scope || me.origScope || me, view, recordIndex, cellIndex, item, e, record, row);
}


// Patch
if (item.stopSelection !== false) {
return false;
}


} else if (type == 'mousedown' && item.stopSelection !== false) {
return false;
}
}
}
return me.callParent(arguments);
}
});