XTemplate access global variable or js function from within 'if='?

[rmitchell62@me.com]

I'm trying to make the following, which seems like it would be pretty comment.

a select 'dropdown' (eg. select one of 'apple' 'orange' 'pear') and

a templated panel that lists attributes of the selected fruit.

So, I want to be able to only show the attributes for 'apple', when 'apple' is selected from the dropdown.

A template fills in the dropdown just fine. A second template can display the attributes data for all fruits. I am trying to limit this to the selected fruit.

eg. <tpl for="fruit">
<tpl if="name= &quot;apple&quot;">
<div>This fruit is {colour}</div>
</tpl></tpl>

works fine. However I don't want to compare to a static string I need to fetch the value from the select. I've
tried many combinations. For instance I create a variable outside of the template
var this.selectedFruit = "apple";

and inside the template:
<tpl if="name== this.selectedFruit">
but no go. I've tried every permutation of escaping and quoting I can think of. Is there any way to read a variable (that isn't part of the template data) from within the template? How might I read a global var, or call a javascript function or query a ui element value? ( I've tried [{...}] to no avail - is this supposed to work from inside an 'if='?

Please, please, please improve the documentation and provide more thorough examples for XTemplate because it is very powerful. Flailing around trying to guess the syntax is a slow and frustrating process.

[ssk_hari]

Did you found the solution for this ?? Am also facing the similar scnario ...

[tomalex0]

var odd = 1;

<tpl if="xindex == [odd]">{[odd]} Found Here</tpl>

Can you try this, it seems to work.

[ssk_hari]

But, how can I declare a variable like it in Sencha ? ... Also, while looping in tpi, I have to access a javascript function or increment a global variable ... how to do that ?

[tomalex0]

You can call external function from template like this.


function test(){
return 'return me';
}

<tpl if="xindex == [odd]">{[odd]} Found Here returned {[test()]}</tpl>

Regarding variable, can you provide a test case to look into.

[ssk_hari]

This is my requirement. I have a JSON, (say it contains an array of states and country).. I have to display each country and respective states ... So, when parsing , I have to display the COUNTRY name in Heading .. say . red color .. Now, when parsing how can I know when the country name is getting changed ??

Normal cases, when looping we assign the country name to local variable while looping ... and then when we get a new value we compare to the local value ... when they are not same, we can assume that the country name has changed .. But how to implement this in sencha ??

Your above code is really coool .. I can use it !! ...

[RyanFreng]

I'm trying to do the same thing... but can't access a function outside of the XTemplate object...




catalogTpl: new Ext.XTemplate([
'<div class="search-web x-panel-body x-html">',
'<div class="x-content">',
'<ol>',
'<tpl for=".">',
'<li>',
'<div class="catalog-title"><a href="{url}">{title}</a></div>',
'<div class="catalog-author">By <span>{author}</span></div>',
'<div class="catalog-type">{[getDTF(values.document_types_facet)]}</div>',
'<tpl if="dates">',
'<div class="catalog-date">Dates <span>{[values.dates.join(",")]}</span></div>',
'</tpl>',
'<tpl if="this.getDescription(location_holdings_codes)">',
'<div class="catalog-description">{[this.getDescription(location_holdings_codes)]}</div>',
'</tpl>',
'</li>',
'</tpl>',
'</ol>',
'</div>',
'</div>'
])



I need the data being passed to my template to get some special formatting done by the 'getDTF' function. How do we call a function outside of the template? {[theFunction()]} just returns 'Uncaught ReferenceError: theFunction is not definted.

[RyanFreng]

Here's what I came up with. I needed to iterate over the array 'document_types_facet' and change the image based on the item. From what I can tell, there is NO WAY for you to call a function from inside a template. You can ONLY call a local function, configured inside your template, that has a boolean response from a 'tpl if' block. No amount of "{[]}" will let you call functions.

Here's the data I have:

{"document_types_facet" => ["Books", "Microforms"]}

And the ugly but functioning solution:

'<tpl for="document_types_facet">',
'{[values == "Books" ? "<img src=images/book.png />" : ""]}',
'{[values == "Electronic Resources" ? "<img src=images/www.png />" : ""]}',
'{[values == "Microforms" ? "<img src=images/film.png />" : ""]}',
...
'{[values == "Mixed Materials" ? "<img src=images/shape_move_front.png />" : ""]}',
'{.} ',
'</tpl>',


It looks like Ext JS expects your data to be perfect by the time it gets to a template. Templates seem pretty bad at handling the objects they works with.