CODEWITHSUNDEEP
javascriptextjs
user1234
user1234

Reputation: 3159

Ext.XTemplate() not rendering when added dynamically inside a component.EXTJs

I'm adding the components dynamically in a container using the: this.add() method code:

init: function() {
         var combo = new Ext.BoxComponent({

              tpl: new Ext.XTemplate("<div>hellow</div>")
             })
              this.add(combo)

              this.doLayout();
}

However when I add Ext.XTemplate() its not rendering, but whenn I add components like Ext.Button or Ext.ComboBox, they render perfectly. Any ideas why its only the template that is having issues rendering?

Thanks

Upvotes: 0

Views: 861

Answers (1)

Saurabh Nemade
Saurabh Nemade

Reputation: 1582

With the syntax I assume its ExtJS 3.4.

You are missing data property for the template. A template always needs a store or data parameter which is treated as datasource for it.

init: function() {
         var combo = new Ext.BoxComponent({
              data: [{name:"Saurabh"}],
              tpl: new Ext.XTemplate("<div>{name}</div>")
             })
              this.add(combo)

              this.doLayout();
}

Here is working POC code:

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        title: 'Xtemplate usage demo',
        items: [{
                xtype: 'panel',
                listeners: {
                    afterrender: function () {
                        var combo = new Ext.BoxComponent({
                            data: {name:"Saurabh"},
                            tpl: new Ext.XTemplate("<div>hellow {name}</div>")
                        });
                        var combo2 = new Ext.BoxComponent({
                            data: [{name:"Saurabh"}, {name: "User1234"}],
                            tpl: new Ext.XTemplate('<tpl for="."><div>hellow {name}</div></tpl>')
                        });
                        this.add(combo);
                        this.add(combo2);
                        this.doLayout();
                    }
                }
            }]
    });
});

Here is link to working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2rpg

Upvotes: 1

Related Questions