1. #1
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    387
    Vote Rating
    11
    murrah will become famous soon enough

      0  

    Default Tip: dynamic grid action columns based on record data

    Tip: dynamic grid action columns based on record data


    Hi,

    This might save people some time. I needed to be able to dynamically set the action column (Ext.grid.column.Action) on a per row basis. Specifically, the tooltip content. I also wanted to vertically centre the icon in the row because I was also using a template column which made the rows higher than normal.

    Along the way I discovered some things. See the comments below:
    PHP Code:
    {
        
    xtype'actioncolumn',
        
    width50,
        
    header'Open',
        
    align'center',
        
    items: [{
            
    icon'app/images/Button_Next-16px.png'// Hidden dynamically in renderer below
            
    handler: function (gridrowIndexcolIndexbtne) {
                
    // Handle the click
            
    },
            
    getClass: function (valuemetarecordrowIndexcolIndexstore) {
                
    // This method can also be used to set the tooltip dynamically
                
    this.items[0].tooltip 'Click to open the ' record.data.toolname ' window';

    // However, this didnt seem to work reliably:
    // this.items[0].icon = (record.data.surveytype == 'ITC_v1') ? 'app/images/Button_Next-16px.png' : 'app/images/pdficon_small.png';

                
    return ''// No special class needed in this case. Or...
                //return 'epcp-survey-list-action'; // eg You can add the class to the img element if you need to                            
            
    }
        }],

        
    renderer: function (valuemetarecordrowcolumnstoreview) {
            
    /* The following adds this class to the containing td element.
                  eg to vertically align the icon. Useful when using a custom xTemplate for the grid row 
                which makes the cell higher than normal
                
                   .epcp-survey-list-actionitem {
                      vertical-align:middle;
                   }
            */
            
    meta.tdCls 'epcp-survey-list-actionitem';

              
    /* To conditionally hide the icon specified in the icon config above. eg */
            
    if (Ext.isEmpty(record.data.faqpdffilename)) {
                
    meta.style "display:none;"
            
    }
        }

    Cheers,
    Murray
    Last edited by murrah; 15 Jun 2013 at 10:40 PM. Reason: Correct some mis-information!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Excellent! Thanks for sharing with the community!
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    387
    Vote Rating
    11
    murrah will become famous soon enough

      0  

    Default


    Quote Originally Posted by slemmon View Post
    Excellent! Thanks for sharing with the community!
    Very happy to be able to give back!

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Location
    Pakistan
    Posts
    82
    Vote Rating
    2
    zonaib is on a distinguished road

      0  

    Default


    its very helpful
    thanks...

Thread Participants: 2

Tags for this Thread