View Full Version : Showing the action column icon on selection

7 Sep 2011, 3:26 AM
I use a grid with the action column. Necessary behavior: revealing the icon in the action column after selection a row. Example that I use: http://docs.sencha.com/ext-js/4-0/#!/example/grid/array-grid.html (http://docs.sencha.com/ext-js/4-0/#%21/example/grid/array-grid.html)

My solution:

"Selectionchange" event is handled within the controller. I identify indices of the current selected row and the last selected row. Then these two rows are refreshed. Also the id of the current selected record is kept in the grid property "selectedId".

Part of the grid controller code:

init: function() {
'recentItems': {
selectionchange: this.onGridSelectionChanged

onGridSelectionChanged: function(view, selections, eOpts) {
var grid = view.view.panel;
var selectedRecord = selections[0];
var lastId = grid.selectedId;
grid.selectedId = selections[0].get('id');

var lastIndex = grid.getView().getStore().indexOfId(lastId);
var index = grid.getView().getStore().indexOf(selectedRecord);
if(lastIndex != -1) {

Within the "getClass" function the CSS class is returned if the refreshed row is the current selected row.

Part of the grid panel code:

header: 'Actions',
xtype: 'actioncolumn',

items: [{
getClass: function(v, meta, rec, rowIndex, colIndex, store) {
var grid = this.ownerCt.ownerCt;
if (rec.data.id == grid.selectedId) {
return 'icon-open-item';

I have the following problem when I select a row: after component refreshing the focus on the selected row get lost.

How can I solve this problem? What can I do to implement necessary behavior in a different way?


7 Sep 2011, 8:40 AM
What you could do is listen for selection change. When selection change occurs, set the value of the data for a field/cell and commit it. Cache a copy of those records. When the selection changes again, loop through the old list, and set the value accordingly, to clear the icon. Repeat and rinse!

8 Sep 2011, 2:50 AM
Wouldn't it be much, much, much easier to do this entirely in CSS? Just set display: none in the CSS for the actioncolumn icon and switch it for rows with x-grid-row-selected.

Like this:

.icon-open-item {
display: none;

.x-grid-row-selected .icon-open-item {
display: block;

Works for me.

9 Sep 2011, 12:15 AM
Thanks a lot! It works!