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
    Vote Rating
    2
      0  

    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
    Vote Rating
    2
      0  

    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
    Vote Rating
    296
      0  

    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
  •