Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: Changing the icon for ActionColumn based on certain condition

  1. #11

    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    I just checked it out!!
    The thing is that in Ext 4.0.7 the 'renderer' function it's executed within the scope of the grid,
    but in Ext 4.1.1 within the scope of the actioncolumn..

  2. #12

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

    Hi chramer,

    how to work grid.column[0].items.[0].icon


    is 0 is index?

  3. #13
    Sencha User
    Join Date
    Feb 2014
    Posts
    3
    Answers
    1

    Default I think this is a better way than using the renderer.

    The link above explains how to use getClass to show icons selectively and other useful things. It arrives at a cleaner solution than using the renderer, plus, it avoids the scoping problems (although I'm sure I can find one ;-). The getClass is set per item in the action column, so you don't have to have if/thens to figure out who you are, as the renderer did. You can just return the correct class based on the record value you're keying on. Look at the code in the link, but here it mine (pared down) for what it's worth...

    Code:
    xtype:'actioncolumn', 
    width:50,
    items: [{
        icon: 'resources/img/icon1.png',  
        handler: function(grid, rowIndex, colIndex) {
            var rec = grid.getStore().getAt(rowIndex);
            rec.set('details', 'MATCH');
            //   other stuff to do...
        },
        getClass: function( value, metadata, record ){
            var state = record.get('details');
            if( state == 'MATCH' )
                return 'x-hide-display';   //HIDE IT
            else
                return 'x-grid-center-icon';  //SHOW IT
        }
    },{
        icon: 'resources/img/icon2.png',
        handler: function(grid, rowIndex, colIndex) {
            var rec = grid.getStore().getAt(rowIndex);
                              
            rec.set('details', 'NO_MATCH');
            //   other stuff to do...
        },                
        getClass: function( value, metadata, record ){
            var state = record.get('details');
            if( state == 'NO_MATCH' )
                return 'x-hide-display';  //HIDE IT
            else
                return 'x-grid-center-icon';  //SHOW IT
        }
    },

  4. #14
    Sencha User
    Join Date
    Mar 2017
    Posts
    11

    Default

    In same example, I want to user "Edit" and "Delete" text instead of icon. How can i do that. i have tried using text and html config but this are not supported i guess. Thank you in advance.

  5. #15
    Sencha User
    Join Date
    Jul 2016
    Posts
    64
    Answers
    6

    Default

    @Wpriyanka: You dont need actioncolumn for your case, you can just do away with renderer with a text or button. Both examples are shown here:

    Code:
    columns: [
            {text: 'First Name',  dataIndex:'firstname'},
            {text: 'Last Name',  dataIndex:'lastname'},
            {
                renderer: function(value, metadata, record) {
                    debugger;
                        if(record.data.firstname.localeCompare('Jim')==0 )
                            return 'EDIT';
                        else
                            return '<div class="x-btn x-unselectable x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon x-border-box" background-position:center center;background-repeat:no-repeat;">DELETE</div>';
                }
            }
        ]
    Please use new threads for Q&A instead of reviving old threads.

Page 2 of 2 FirstFirst 12

Posting Permissions

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