PDA

View Full Version : Xtemplate for showing icons in grid column



delp
12 Feb 2014, 1:22 AM
Iím trying to create an Xtemplate and the bit I canít get Iíve marked in bold. Iíve 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




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



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.


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" ]});

delp
12 Feb 2014, 1:30 AM
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 )">',

Gary Schlosberg
12 Feb 2014, 6:30 AM
Glad to hear you've gotten it resolved, and thanks for sharing the solution with the community.