Results 1 to 9 of 9

Thread: How to Change action column icon dynamically?

  1. #1

    Default 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

    Default

    any one ?

  3. #3
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    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

    Default

    bump

  5. #5
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    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

    Default

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

  7. #7
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    Default

    Do you mean you get the image from a store?

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    35

    Default

    Sorry,

    I get the published data from the store

    Published 1 = green icon
    Published 0 = red icon

  9. #9
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    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);
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •