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
    Answers
    15
    Vote Rating
    3
    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
    Answers
    15
    Vote Rating
    3
    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
    Answers
    15
    Vote Rating
    3
    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
    Answers
    15
    Vote Rating
    3
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi