在组件内部动态添加Ext.XTemplate()时不呈现。

时间:2019-04-25 01:55:30

标签: javascript extjs

我使用以下命令在容器中动态添加组件: this.add()方法 代码:

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

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

              this.doLayout();
}

但是,当我添加Ext.XTemplate()时,它不呈现,但是当我添加Ext.Button或Ext.ComboBox之类的组件时,它们完美呈现。 知道为什么只有它的模板呈现问题吗?

谢谢

1 个答案:

答案 0 :(得分:1)

使用语法,我假设它的ExtJS 3.4。

您缺少模板的数据属性。 模板始终需要一个存储或数据参数,该参数被视为其数据源。

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

              this.doLayout();
}

此处正在使用POC代码:

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

以下是工作提琴的链接: https://fiddle.sencha.com/#view/editor&fiddle/2rpg