1. #1
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    381
    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
    4,789
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    381
    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