skif
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() {
this.control({
'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) {
grid.getView().refreshNode(lastIndex);
}
grid.getView().refreshNode(index);
}
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?
Thanks.
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() {
this.control({
'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) {
grid.getView().refreshNode(lastIndex);
}
grid.getView().refreshNode(index);
}
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?
Thanks.