View Full Version : How to change the image of a ActionColumn on click

17 Dec 2012, 12:25 PM

I have a action column and i need to change the icon and tool tip on click of it (set of three icons of involved), and also call a javascript method. Can you please guide me how to do this, i know that i have use the handler but not sure how to use the setIconcls and setTooltipCls

I have put the icons in the css and dynamically set the css based on condition

xtype: 'actioncolumn',
width: 40,

items: [{
getClass: function (v, meta, rec) {
if (rec.data.Iswatched == 'false') {
this.icon = 'images/TableIconHalf.png';
return 'assetViewedPartialImage';
else if (rec.data.Iswatched == 'true') {
this.icon = 'images/TableIconHalf.png';
this.items[0].tooltip = 'Click to mark as <br/> not watched';
return 'assetViewedImage';
else {
this.icon = 'images/TableIconHalf.png';
this.items[0].tooltip = 'Click to mark <br/>as watched';
return 'assetNotViewedImage';
handler: function (grid, cell, row, col, e) {
var rec = grid.getStore().getAt(cell);
if (rec.data.Iswatched != 'false') {
toggleVideoState(grid, cell, row, col, e);


17 Dec 2012, 7:12 PM
I'm afraid this doesn't quite answer your question, but it's a starting point... when i tried the following:

xtype: 'actioncolumn', width: 54,
items: [
handler: function(view, rowIndex, colIndex, item, e, record, row) {

icon: 'images/jobsearch.png'

I can change the icon that is set for that ActionColumnItem... but so far i have yet to find a method that causes that change to displayed.

Someone may know what to do to get this change to appear... although there is a possibility that redisplaying the grid might reset the configs, i can't say for sure since i'm not that familiar with Ext JS, but this gives you a starting point to play arround with (and maybe figure it out yourself) or failing that maybe give a useful clue to the next person who tries to help out (Unless i'm barking up the wrong tree :-?)