Results 1 to 3 of 3

Thread: Xtemplate for showing icons in grid column

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Scotland
    Posts
    111
    Answers
    7

    Default Answered: Xtemplate for showing icons in grid column

    Im trying to create an Xtemplate and the bit I cant get Ive marked in bold. Ive been using the below using the console to test code. I either wish to pass the reportUrl into the local function to complete the if statement or do a check of the fileType value. Based on the outcome the image source will be different. I am unable to pass a value into the function. I can pass say a basic string (by hard coding it), but I haven't been able to pass a value such as the current reportUrl


    Code:
    new Ext.XTemplate(
                        '<tpl foreach="reportUrl">',
                          '<a href="{.}">',
                          '<tpl if="parent.fileType[xindex-1] === 'pdf'">',
                               '<img src="' + MyApp.property.Strings.pdfIconUrl + '" alt="{[parent.fileType[xindex-1]]}" ></img></a>',
                           '<tpl else>',
                               '<img src="' + MyApp.property.Strings.excelIconUrl+ '" alt="{[parent.fileType[xindex-1]]}" ></img></a>',
                           '</tpl>', 
                        '</tpl>',
                        {
                                    isPdf: function( name ){                         
                                    return name.indexOf('.pdf') !== -1;
                            }
                        }
                    ).apply({id: "215810859", fileName: "Europev1", fileType: ["pdf","xls"], reportUrl:["http://www.some.url.co.uk/myreport.pdf","http://www.some.url.co.uk/myreport.xls" ]});
    OR

    Code:
    new Ext.XTemplate(
                        '<tpl foreach="reportUrl">',
                          '<a href="{.}">',
                          '<tpl if="this.isPdf( {values} )">',
                               '<img src="' + MyApp.property.Strings.pdfIconUrl + '" alt="{[parent.fileType[xindex-1]]}" ></img></a>',
                           '<tpl else>',
                               '<img src="' + MyApp.property.Strings.excelIconUrl+ '" alt="{[parent.fileType[xindex-1]]}" ></img></a>',
                           '</tpl>', 
                        '</tpl>',
                        {
                                    isPdf: function( name ){                         
                                    return name.indexOf('.pdf') !== -1;
                            }
                        }
     
     
                    ).apply({id: "215810859", fileName: "Europev1", fileType: ["pdf","xls"], reportUrl:["http://www.some.url.co.uk/myreport.pdf","http://www.some.url.co.uk/myreport.xls" ]});
    The following works - but I want to replace the hardcoded "blah.pdf" with a value.
    Code:
    new Ext.XTemplate(                    
    '<tpl foreach="reportUrl">',                      
    '<a href="{.}">',                      
    '<tpl if="this.isPdf(\'blah.pdf\')">',                           
    '<img src="' + MyApp.property.Strings.pdfIconUrl + '" alt="{[parent.fileType[xindex-1]]}" ></img></a>',                        
    '<tpl else>',                           
    '<img src="' + MyApp.property.Strings.excelIconUrl+ '" alt="{[parent.fileType[xindex-1]]}" ></img></a>',                        
    '</tpl>',                      
    '</tpl>',                    
    {                        
    isPdf: function( name ){                            
    console.log('name --' + name + ' ' +( name.indexOf('.pdf') !== -1 ) );   return name.indexOf('.pdf') !== -1;                         }             } ).apply(
    {id: "215810859", 
    fileName: "Europev1", 
    fileType: ["pdf","xls"], 
    reportUrl:["http://pdf.pdf.co.uk.pdf","http://xls.xls.co.uk.xls" ]});

  2. bah that's twice in two days. No sooner have I asked a question (after ages of trying to figure it out) then the answer comes...

    The bit in bold had to be
    '<tpl if="this.isPdf( values )">',

  3. #2
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Scotland
    Posts
    111
    Answers
    7

    Default

    bah that's twice in two days. No sooner have I asked a question (after ages of trying to figure it out) then the answer comes...

    The bit in bold had to be
    '<tpl if="this.isPdf( values )">',

  4. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Glad to hear you've gotten it resolved, and thanks for sharing the solution with the community.

Tags for this Thread

Posting Permissions

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