PDA

View Full Version : Trouble with Actions in columns



frank1russo
19 Apr 2012, 12:18 PM
I have a column with two actions that are being passed to me. Both of the actions calls some JavaScript that pops up the row's full data in a separate screen. One action for edit and one for view. For some reason, both icons call the view javascript. The edit icon should be calling the edit javascript.

I tried separating them out into different columns on their own, but I get the same result. It seems that the handler of the second icon overrides the first. I'd appreciate any ideas on how to fix this.

Here is a code snippet to show you how it is being done.

// create the actioncolumn
column = {};
column.xtype = 'actioncolumn';
column.width = 3;
column.items = [];
for (var i = 0; i < rowActions.length; i++)
{
var action = rowActions[i];
console.log("building rowaction column with action.handler == " + action.handler);
// Add each rowAction. We do it like this, because the rowActions are configurable
// and are coming from other places. The rendering code here is reused.
column.items.push({
icon: action.icon,
tooltip: action.tooltip,
handler: function(grid, rowIndex, colIndex)
{
var rec = grid.getStore().getAt(rowIndex);
console.log("action.handler == " + action.handler);
action.handler(grid, rowIndex, colIndex);
}
});
console.log("column built. column.items handler == " + column.items[0].handler);
}
columnDefs.push(column);

// further down ...

grid = Ext.create('Ext.grid.Panel',
{
title: 'Account Information',
store: store,
columns: columnDefs,
selModel: selModel,
renderTo: 'griddiv',
forceFit: true,
viewConfig:
{
stripeRows: true
},
dockedItems: [
{
xtype: 'toolbar',
items: gridActions
}]
});

skirtle
20 Apr 2012, 1:31 AM
Please use [CODE] tags when posting code. I'm going to move this thread to the appropriate forum.

The reference to action caught in the closure of your handler is a live reference. It doesn't capture the value of action at the time the function is created.

The easiest way to fix it in this case is to use Ext.each to loop over rowActions. The action variable will then be scoped accordingly.

frank1russo
20 Apr 2012, 5:46 AM
Worked perfectly.

Sorry about posting in the wrong forum. I'll try searching around more next time.

Thanks...