PDA

View Full Version : How to Change action column icon dynamically?



Ankit.Desai
5 Oct 2011, 8:32 AM
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
6 Oct 2011, 10:12 AM
any one ?

twaindev
6 Oct 2011, 3:01 PM
If you would use iconCls (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action-cfg-iconCls) instead of icon then you can use getClass (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action-cfg-getClass) to determine the correct iconCls.

r.vanelk
11 Oct 2011, 12:07 AM
bump

twaindev
11 Oct 2011, 12:28 AM
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
11 Oct 2011, 12:37 AM
Is there a better solution ? I will get the data from the store.

twaindev
11 Oct 2011, 12:53 AM
Do you mean you get the image from a store?

r.vanelk
11 Oct 2011, 12:56 AM
Sorry,

I get the published data from the store

Published 1 = green icon
Published 0 = red icon

twaindev
11 Oct 2011, 1:10 AM
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);
}