1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    28
    Vote Rating
    0
    Ankit.Desai is on a distinguished road

      0  

    Default Unanswered: How to Change action column icon dynamically?

    Unanswered: How to Change action column icon dynamically?


    Hello,

    I am trying to display
    xtype:'actioncolumn'
    icon config dynamically base on lets say role of login person.

    code is as below

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

    Code:
    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
    Last edited by Ankit.Desai; 5 Oct 2011 at 8:33 AM. Reason: typo

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    28
    Vote Rating
    0
    Ankit.Desai is on a distinguished road

      0  

    Default


    any one ?

  3. #3
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Vote Rating
    3
    Answers
    15
    twaindev is on a distinguished road

      0  

    Default


    If you would use iconCls instead of icon then you can use getClass to determine the correct iconCls.

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    35
    Vote Rating
    0
    r.vanelk is on a distinguished road

      0  

    Default


    bump

  5. #5
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Vote Rating
    3
    Answers
    15
    twaindev is on a distinguished road

      0  

    Default


    I guess I have to post an example:

    Code:
    {
        header: 'Actions',
        xtype: 'actioncolumn',
        width: 55,
        fixed: true,
        align: 'center',
        getClass: this.getActionClass
    }
    Code:
       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';
            }
        }
    HTML Code:
    .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);
    }

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    35
    Vote Rating
    0
    r.vanelk is on a distinguished road

      0  

    Default


    Is there a better solution ? I will get the data from the store.

  7. #7
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Vote Rating
    3
    Answers
    15
    twaindev is on a distinguished road

      0  

    Default


    Do you mean you get the image from a store?

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    35
    Vote Rating
    0
    r.vanelk is on a distinguished road

      0  

    Default


    Sorry,

    I get the published data from the store

    Published 1 = green icon
    Published 0 = red icon

  9. #9
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Vote Rating
    3
    Answers
    15
    twaindev is on a distinguished road

      0  

    Default


    Then do something like this:

    Code:
    getActionClass: function (val, meta, rec) {
         return rec.get('published') === 1 ? "green" : "red";
    }
    Code:
    {
      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);
    }

Thread Participants: 2