Search code examples
javascriptextjsfor-loopextjs4

ExtJS Template for loop

I want to iterate through the array in ExtJS Template, but iteration does not happen.

var template  = '<span style="margin-left :0%;display:inline">|</span><tpl for="."><tpl for="pipe"><span style="margin-left :14%;display:inline">{.}|</span></tpl></tpl>';

var data = {count : '6',pipe : ['1','2','3','4','5','6']};

var tpl = new Ext.Template(template);
template = tpl.apply(data);
// append template to dom

I use .apply() to apply the data into the template (which retrieves count object), do I need something like .overwrite for iteration and insert new elements to the templates? and I don't understand what's the difference between .apply() and .overwrite()

Solution

  • You should use Ext.XTemplate instead of Ext.Template

    Ext.XTemplate have support for <tpl> commands. Ext.Template don't.

    • apply() - just process template with provided data and returns HTML fragment as string.
    • overwrite() - first parameter have to be Ext.Element or DOM element selector. Then template is processed with provided data and result is used as new content of the element.