CODEWITHSUNDEEP
javascriptextjs
Jacobian
Jacobian

Reputation: 10832

Loop through array and execute statement inside XTempate

I have a custom component, with such a store:

"store":{
    "fields":["name"],
    "data":[{
        "id":"1","name":"John","checked":"truec","tools":["user","doc"]
     },{
        "id":"2","name":"Jack","checked":"false","tools":["user"]
     }]
}

And I have a template, which I use inside my custom Ext.ux.CheckList. It works good, except one tiny thing - I do not know how to loop through tools array. This is what I have now:

'<tpl for="tools">',
 // if (curValue == "user") '<div>Value 1</div>'
 // else if (curValue == "doc") '<div>Value 2</div>'           
'</tpl>'

I've seen this and this examples, but they do not solve my problem. As you can see, I want to use tools values inside the loop:

if (curValue == "user") '<div>Value 1</div>'
else if (curValue == "doc") '<div>Value 2</div>'

But I do not know how to achieve this.

Upvotes: 0

Views: 758

Answers (1)

Trevor Karjanis
Trevor Karjanis

Reputation: 1724

The value at the current index when iterating through a flat array can be accessed with "{.}" in markup and the "values" property in conditionals.

Sencha Fiddle: An Example of Iterating Through a Flat Array

var template = new Ext.XTemplate(
    '<tpl for=".">',
        '<p>{name}</p>',
        '<tpl for="tags">',
            '<tpl if="values === \'user\'">',
                '<p>{.}</p>',
            '<tpl elseif="values === \'doc\'">',
                '<pre>{.}</pre>',
            '</tpl>',
        '</tpl>',
        '<br>',
    '</tpl>'
);

https://www.sencha.com/forum/showthread.php?320083 http://docs.sencha.com/extjs/6.2.0/classic/Ext.XTemplate.html

Upvotes: 1

Related Questions