Changing the icon for ActionColumn based on certain condition

[webfriend13]

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]

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]

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]

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]

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]

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]

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]

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/...in-a-nutshell/

[filippo.ferrari]

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]

Solved with me = this in initComponenet method of my grid:

initComponent: function() {
        var me = this; 

and using me instead this!

Bye