javascript - Extjs4 MVC Xtemplate 错误：无法设置属性“innerHTML”为空

Question

我是 extjs 的新手。我想在面板中显示一些信息。我创建了一个面板，当我用数据覆盖 tpl 时，出现“未捕获的 TypeError：无法设置属性 'innerHTML' of null”。

代码：

initComponent: function(){
        var me = this;
        var data={
                name:'lux',
                age:'22'
            };
        var item=Ext.create('Ext.panel.Panel',{title:'title'});
        var tpl=new Ext.XTemplate(
            '<p>Name: {name}</p>',
            '<p>Company: {age}</p>',
            '<p>Location:</p>',
            '<p>Kids: '
            );
        tpl.overwrite(item.body, data);

        Ext.applyIf(me,{
            items:item

        });
        me.callParent( arguments );
    } 

Answer 1

问题是组件尚未渲染，这意味着该body元素不存在。相反，您应该使用 api：

initComponent: function() {
    var item = new Ext.panel.Panel({
        title: 'title',
        tpl: [
            '<p>Name: {name}</p>', 
            '<p>Company: {age}</p>', 
            '<p>Location:</p>'
        ],
        data: {
            name: 'lux',
            age: '22'
        }
    });

    this.items = item;
    this.callParent(arguments);
}