1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Answers
    2
    Vote Rating
    1
    Ex_Soft is an unknown quantity at this point

      0  

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

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


    Code:
    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.
    Code:
    "<tpl if=\"smthExternalVar==&quot;blah-blah-blah&quot;\">",
        "othersExternalVar",
    "</tpl>"
    ?

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Answers
    2
    Vote Rating
    1
    Ex_Soft is an unknown quantity at this point

      0  

    Default


    Code:
         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()
        });

Thread Participants: 1