EXTJs Action Column icon - extjs

Question

I want the icon to change from accept to delete when it is clicked on.
Set the iconflag = 1 because on page load I want the accept icon to be seen.
The code below doesn't satisfy the expectation
{
xtype: 'actioncolumn',
width: 30,
items: [{
flex: 1,
tooltip: 'Click to expand',
icon: iconflag == '1' ? "shared/icons/fam/accept.gif" : "shared/icons/fam/delete.gif",
getClass: this.getActionClass,
handler: function() {
if (iconflag == '1') {
iconflag = '0';
} else if (iconflag == '0') {
iconflag = '1';
}
alert(iconflag);
}
}]
},
Using EXTJs 4.2

Answer 1

In your handler function, iconflag is a local variable that loses its value outside the handler function. Where you use iconflag outside the handler function, it is evaluated only ONCE, before you click on the icon.
What you want to do is store your variable in a place that automatically forces the grid to update. Which is why you want to store the iconflag on the records in the store.
Add to your model another field:
{
name: 'iconflag',
type: 'bool',
defaultValue: false,
persist: false
}
Move the icons into CSS:
Ext.util.CSS.createStyleSheet([
'.iconflag-accept {',
' background-image: url(\'shared/icons/fam/accept.gif\')',
'}',
'.iconflag-delete {'
' background-image: url(\'shared/icons/fam/delete.gif\')',
'}'
].join(''));
Update the column to use the field:
dataIndex: 'iconflag',
getClass: function(iconflag) {
if(iconflag) return 'iconflag-delete';
else return 'iconflag-accept';
},
handler: function(view, colindex, rowindex, item, e, record) {
record.set('iconflag', !record.get('iconflag'));
}
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/205l