1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default Unanswered: Changing the icon for ActionColumn based on certain condition

    Unanswered: Changing the icon for ActionColumn based on certain condition


    Hi All,

    I am using following code to add Actioncolumn to my grid

    Code:
    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?

  2. #2
    Sencha User chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    204
    Answers
    42
    Vote Rating
    10
    chramer will become famous soon enough

      0  

    Default


    For me it worked with the renderer like so :
    Code:
    {
        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/

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    204
    Answers
    42
    Vote Rating
    10
    chramer will become famous soon enough

      0  

    Default


    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'
    Code:
    {
        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) {}
        }]
    }

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    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) {} }] }

  6. #6
    Sencha User chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    204
    Answers
    42
    Vote Rating
    10
    chramer will become famous soon enough

      0  

    Default


    Code:
    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;
        }
    }

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    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?

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      1  

    Default


    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/

  9. #9
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by chramer View Post
    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'
    Code:
    {
        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

  10. #10
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      1  

    Default


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

    PHP Code:
    initComponent: function() {
            var 
    me this
    and using me instead this!

    Bye