PDA

View Full Version : Changing the icon for ActionColumn based on certain condition



webfriend13
10 Apr 2012, 2:36 AM
Hi All,

I am using following code to add Actioncolumn to my grid



Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott"},
{firstname:"Dwight", lastname:"Schrute"},
{firstname:"Jim", lastname:"Halpert"},
{firstname:"Kevin", lastname:"Malone"},
{firstname:"Angela", lastname:"Martin"}
]
});

Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: 'extjs/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
],
width: 250,
renderTo: Ext.getBody()
});


What i want:

I want to set the icon for each row in the grid based on certain condition rather then setting at the design time. is there any way to loop through each record check the value and set the icon for the action column?

chramer
10 Apr 2012, 3:09 AM
For me it worked with the renderer like so :

{
xtype: 'actioncolumn',
width: 20,
renderer: function (value, metadata, record) {
if (record.get('price') < 50) {
grid.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/green_circle.png';
} else {
grid.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/red_circle.png';
}
},
items: [{
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {}
}]
}

Working Sample : http://jsfiddle.net/serju/7AQkP/

webfriend13
10 Apr 2012, 9:37 PM
Hi Charmer,

Thank you for quick reply. How are you accessing grid within renderer function, as it is not passed as argument to the function? Do we need to access the grid using Ext.getCmp()??? Or do we have other ways to access the grid within this function?

I am asking this because I have defined the renderer function into a different file. In such case how can I pass the grid object around ?

Thank you.

chramer
10 Apr 2012, 10:09 PM
I have a grid variable. In your case you can use 'this'.. I see that the renderer is executed
with the scope of the grid. So just replace 'grid' with 'this'


{
xtype: 'actioncolumn',
width: 20,
renderer: function (value, metadata, record) {
if (record.get('price') < 50) {
this.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/green_circle.png';
} else {
this.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/red_circle.png';
}
},
items: [{
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {}
}]
}

webfriend13
11 Apr 2012, 12:56 AM
Hi Chramer,

Thank you for the reply. I want to disable action event for few rows based on certain value. How can i do that. if i use disable action, it disables all the rows.


{ xtype: 'actioncolumn', width: 20, renderer: function (value, metadata, record) { if (record.get('price') < 50) { Disable the button. } else { Enable the button. } }, items: [{ tooltip: 'Edit', handler: function (grid, rowIndex, colIndex) {} }] }

chramer
11 Apr 2012, 1:15 AM
renderer: function (value, metadata, record) {
if (record.get('price') < 50) {
this.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/green_circle.png';
this.columns[0].items[0].disabled = true;
} else {
this.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/red_circle.png';
this.columns[0].items[0].disabled = false;
}
}

webfriend13
11 Apr 2012, 1:32 AM
Hey Chramer,

Thank you once again. Using this code is disabling the icons for all the rows. How can i disable it only for specific row?

webfriend13
11 Apr 2012, 6:59 PM
I am now using this link. With this I have added two items in action column (only one is shown at a time). This implementation gives a feeling that once the user has clicked on a button it got disabled (where as i just hide one button and show the other).

http://www.learnsomethings.com/2011/09/25/the-new-extjs4-xtype-actioncolumn-in-a-nutshell/

filippo.ferrari
12 Dec 2012, 3:27 AM
I have a grid variable. In your case you can use 'this'.. I see that the renderer is executed
with the scope of the grid. So just replace 'grid' with 'this'


{
xtype: 'actioncolumn',
width: 20,
renderer: function (value, metadata, record) {
if (record.get('price') < 50) {
this.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/green_circle.png';
} else {
this.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/red_circle.png';
}
},
items: [{
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {}
}]
}


For me renderer is not executed in the scope of the grid but in the scope of the actioncolumn :-/

filippo.ferrari
12 Dec 2012, 3:36 AM
Solved with me = this in initComponenet method of my grid:



initComponent: function() {
var me = this;


and using me instead this!

Bye

chramer
12 Dec 2012, 3:55 AM
I just checked it out!!:-?
The thing is that in Ext 4.0.7 the 'renderer' function it's executed within the scope of the grid,
but in Ext 4.1.1 within the scope of the actioncolumn..

Sufala A S
26 Jun 2013, 3:54 AM
I have a grid variable. In your case you can use 'this'.. I see that the renderer is executed
with the scope of the grid. So just replace 'grid' with 'this'


{
xtype: 'actioncolumn',
width: 20,
renderer: function (value, metadata, record) {
if (record.get('price') < 50) {
this.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/green_circle.png';
} else {
this.columns[0].items[0].icon = 'http://dl.dropbox.com/u/14161146/ddt/red_circle.png';
}
},
items: [{
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {}
}]
}



Hi chramer,

how to work grid.column[0].items.[0].icon


is 0 is index?

EXTraordinary
12 Mar 2014, 12:18 PM
The link above explains how to use getClass to show icons selectively and other useful things. It arrives at a cleaner solution than using the renderer, plus, it avoids the scoping problems (although I'm sure I can find one ;-). The getClass is set per item in the action column, so you don't have to have if/thens to figure out who you are, as the renderer did. You can just return the correct class based on the record value you're keying on. Look at the code in the link, but here it mine (pared down) for what it's worth...



xtype:'actioncolumn',
width:50,
items: [{
icon: 'resources/img/icon1.png',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
rec.set('details', 'MATCH');
// other stuff to do...
},
getClass: function( value, metadata, record ){
var state = record.get('details');
if( state == 'MATCH' )
return 'x-hide-display'; //HIDE IT
else
return 'x-grid-center-icon'; //SHOW IT
}
},{
icon: 'resources/img/icon2.png',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);

rec.set('details', 'NO_MATCH');
// other stuff to do...
},
getClass: function( value, metadata, record ){
var state = record.get('details');
if( state == 'NO_MATCH' )
return 'x-hide-display'; //HIDE IT
else
return 'x-grid-center-icon'; //SHOW IT
}
},