How to Change action column icon dynamically?

[Ankit.Desai]

Hello,

I am trying to display

xtype:'actioncolumn'

icon config dynamically base on lets say role of login person.

code is as below

{
            xtype:'actioncolumn', 
            width:50,
            id:'actionCol',
            items: [{
                icon: '../imgs/edit.gif',  // Use a URL in the icon config
                tooltip: 'Edit',
                handler: function(grid, rowIndex, colIndex) {


                }
            }]
    }

I also have fields like below

var fields = [
     {name: 'site_external_id', type: 'string'},
     {name: 'site_name', type: 'string'},
     {name: 'site_address', type: 'string'},
     {name: 'site_new', type: 'string'},
     {name: 'site_status', type: 'string'},
     {name: 'site_access', type: 'string'},
     {name: 'site_id', type: 'string'}
  ];

site_access will have view or edit value. So, I am trying to display icon base on view or edit value.

-Ankit

[Ankit.Desai]

any one ?

[twaindev]

If you would use iconCls instead of icon then you can use getClass to determine the correct iconCls.

[r.vanelk]

bump

[twaindev]

I guess I have to post an example:

{
    header: 'Actions',
    xtype: 'actioncolumn',
    width: 55,
    fixed: true,
    align: 'center',
    getClass: this.getActionClass
}

   getActionClass: function (val, meta, rec) {
        if (rec.get('In') === null) {
            this.tooltip = 'Sign In';
            return 'in';
        }
        else if (rec.get('Out') === null) {
            this.tooltip = 'Sign Out';
            return 'out';
        }
        else {
            this.tooltip = '';
            return 'none';
        }
    }

.x-action-col-cell img
{
  width: 32px;
  height: 32px;
  margin-top: 3px;
  margin-right: 3px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
}

.x-action-col-cell img.in
{
  background-image: url(../images/action-in-32.png);
}

.x-action-col-cell img.out
{
  background-image: url(../images/action-out-32.png);
}

[r.vanelk]

Is there a better solution ? I will get the data from the store.

[twaindev]

Do you mean you get the image from a store?

[r.vanelk]

Sorry,

I get the published data from the store

Published 1 = green icon
Published 0 = red icon

[twaindev]

Then do something like this:

getActionClass: function (val, meta, rec) {
     return rec.get('published') === 1 ? "green" : "red";
}

{
  width: 32px;
  height: 32px;
  margin-top: 3px;
  margin-right: 3px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
}

.x-action-col-cell img.green
{
  background-image: url(../images/green.png);
}

.x-action-col-cell img.red
{
  background-image: url(../images/red.png);
}