Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Answers
    2
    Vote Rating
    3
      0  

    Default [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
      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
    3
      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()
        });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •