PDA

View Full Version : How to change icon in ActionColumn?



carrier24sg
29 Nov 2010, 2:41 AM
Hey guys,

How do I change the icons of the items in the ActionColumn programmatically? I need the icon to change background-image after clicking it.

Condor
29 Nov 2010, 2:48 AM
Does the item handler change the record when you click on the action item?

In that case you can write a getClass method for the action item that returns the iconCls based on the current record state.

carrier24sg
29 Nov 2010, 3:17 AM
Does the item handler change the record when you click on the action item?

In that case you can write a getClass method for the action item that returns the iconCls based on the current record state.

hi Condor, am not exactly sure what you mean. Currently I have this



items:[{
handler: function(grid, rowIndex, columnIndex){
//not sure what i need to insert here
},
getClass: function (v,meta,rec){
if(rec.get('tracked') == 0){
this.items[0].tooltip = 'Add this to tracklist';
return 'track-col';
}else{
this.items[0].tooltip = 'Already tracking';
return 'tracking-col';
}
},
}]

Do you mean inside the click handler, i can simply call the getClass function after altering the record to change the image?

carrier24sg
29 Nov 2010, 3:36 AM
Oh wow! I got it! Simply changing the record will do! thats really cool..

Condor
29 Nov 2010, 4:05 AM
Something like:

handler: function(grid, rowIndex, columnIndex, item, e){
grid.getStore().getAt(rowIndex).set('tracked', true);
},
(but you already figured that out yourself)

tayyabah
11 Aug 2011, 11:05 PM
I have added the action column by following the code snippet given in the API. I have tweaked it a bit to change the icon but my first row is not showing the icon. Can anyone look into my code and let me know what is wrong with the code? I am kind of stuck.

xtype: 'actioncolumn', width: 50,
dataIndex: 'change',
items: [ {
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
}
},
{
getClass: function(v, meta, rec) {
if (rec.get('change') < 0) {
this.items[0].tooltip = 'Do not buy!';
this.items[0].icon = 'red.gif';
return 'testCls';
} else {
this.items[0].tooltip = 'Buy stock';
this.items[0].icon = 'green.gif';
return 'testCls';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
}
}]

angel.paz
19 Sep 2011, 9:54 AM
I have the same problem, tooltips works fine, but changing icons doesn´t. Please can anyone help us. Thanks.

mjhaston
27 Sep 2011, 7:39 AM
This works perfectly for me in changing my icon and tooltip in an action column. Maybe it will help?



.x-action-col-icon {
height: 16px;
width: 16px;
margin-right: 8px;
}
.reportAvailableCss {
background-image: url(../icons/report.png);
height: 16px;
width: 16px;
}
.reportSentCss {
background-image: url(../icons/report_go.png);
height: 16px;
width: 16px;
}
.emptyCss{ height: 0px;
width: 0px;
}









getClass : function(v, meta, rec) {

var myDate = new Date(rec.get('visit-date'));
var myDateYear = myDate.getFullYear();
var currentDate = new Date();
var currentYear = currentDate.getFullYear();

if (rec.get('reportSent') == 'Y') {
this.items[2].tooltip = 'Report has been sent';
return 'reportSentCss';
} else if (myDateYear == currentYear) {
this.items[2].tooltip = 'Report is available to send';
return 'reportAvailableCss';
} else {
return 'emptyCss';
}

}