[4.1.1] How to use "external" variables in Ext.XTemplate

[Ex_Soft]

Ext.onReady(function() {
var
store = Ext.create("Ext.data.Store", {
fields: [
{ name: "id", type: "int" },
"fstring1",
"fstring2",
"fstring3",
{ name: "fdate", type: "date", dateFormat: "c" }
],
data: [
{ id: 1, fstring1: "fstring1", fdate: "2012-10-31T15:55:13.123" },
{ id: 2, fstring1: "fstring", fstring2: "fstring2" },
{ id: 3, fstring1: "fstring1" },
{ id: 4, fstring1: "fstring", fstring3: "fstring3" },
{ id: 5, fstring1: "fstring1" }
]
});

Ext.create("Ext.grid.Panel", {
store: store,
columns: [
{ header: "id", dataIndex: "id" },
{ header: "fstring", dataIndex: "fstring", renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var
result,
smthExternalVar = "blah-blah-blah",
tpl = new Ext.XTemplate(
"<div>",
smthExternalVar, // works
//"{[smthExternalVar]}", // doesn't work
" fstring1: {fstring1}",
"<tpl if=\"fdate\">",
" fdate: {fdate:date(\"d.m.Y\")}",
"</tpl>",
"<tpl if=\"fstring1==&quot;fstring&quot;\">",
"<tpl if=\"fstring2\">",
" fstring2: {fstring2}",
"<tpl elseif=\"fstring3\">",
" fstring3: {fstring3}",
"</tpl>",
"</tpl>",
"</div>"
);

result = tpl.apply(record.data);

return result;
},
flex: 1 }
],
renderTo: Ext.getBody()
});
});

How to use "external" variables in Ext.XTemplate's expression e.g.


"<tpl if=\"smthExternalVar==&quot;blah-blah-blah&quot;\">",
"othersExternalVar",
"</tpl>"

?

[James Goddard]

Ifs are a PITA in templates.

It's not really an answer but if I were you I would add a template function and put your if and external references in there.

[Ex_Soft]

Ext.create("Ext.grid.Panel", {
store: store,
columns: [
{ header: "id", dataIndex: "id" },
{ header: "fstring", dataIndex: "fstring", renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var
result,
smthExternalVar = "blah-blah-blah",
tpl = new Ext.XTemplate(
"<div>",
smthExternalVar,
" ",
"{[smthExternalInternalVar]}",
" ",
"<tpl if=\"smthExternalInternalVar==&quot;blah-blah-blah&quot;\">",
"halb-halb-halb",
"</tpl>",
" fstring1: {fstring1}",
"<tpl if=\"fdate\">",
" fdate: {fdate:date(\"d.m.Y\")}",
"</tpl>",
"<tpl if=\"fstring1==&quot;fstring&quot;\">",
"<tpl if=\"fstring2\">",
" fstring2: {fstring2}",
"<tpl elseif=\"fstring3\">",
" fstring3: {fstring3}",
"</tpl>",
"</tpl>",
"</div>",
{
definitions: "var smthExternalInternalVar=\""+smthExternalVar+"\";\n"
}
);

result = tpl.apply(record.data);

return result;
},
flex: 1 }
],
renderTo: Ext.getBody()
});