View Full Version : Inserting specific icons within grid columns

20 Feb 2008, 10:22 AM
We will need an application where a grid will need to have company icons inserted into several different grid columns. Is there a simple way to do this or would I need to extend the grid class to do this? Clicking on one of the icons will require some type of an event or action to be fired.

20 Feb 2008, 10:26 AM
I think Grid columnModel 'renderer' conf option solve your problem! ;)

20 Feb 2008, 10:27 AM
I did something similar to display a status image instead of text (ie. a tick icon as active status and a cross as inactive). You can do this using a renderer.

See the following code to see how my renderer works:

function displayStatus(value) {
if(value == 1) {
var className = 'active-icon';
var title = 'Active';
} else {
var className = 'inactive-icon';
var title = 'Inactive';
return '<img src="' + emptyIcon + '" class="' + className + '" title="' + title + '" />';

And the Column Model (see the function renderer in the status column):

[PHP]var cm = new Ext.grid.ColumnModel([
{id: 'id', header: "ID", width: 30, sortable: true, dataIndex: 'id'},
{id: 'domain', header: "Dom

20 Feb 2008, 12:15 PM
As they said above, but one more. See the stars column here (http://extjs.com/learn/Tutorial:Ext20_Grid_Editor_PHP_MySQL).