Javascript 如何将XTemplate放置在外部面板中？

我正在学习extjs，我很好奇如何在面板中添加XTemplate。下面的代码是我到目前为止的代码，它可以工作，但“apply”函数不能用“smith”或“21”替换“{name}”和“{age}”。我假设我忘了做些什么，或者我没有正确使用Xtemplate。有什么建议吗

var tpl = new Ext.XTemplate('Name: {name}<br>Age: {age}');
tpl.apply({
    name:'smith',
    age:21
});
tpl.compile();


var northEastPanel = new Ext.Panel({
    flex: 1,
    autoHeight:true,
    border:false,
    frame:true,
    layout:'form',
    items:[tpl]
});

var tpl=new Ext.XTemplate（'Name:{Name}
Age:{Age}'）；
第三方物流应用({
姓名:"史密斯",，
年龄:21
});
tpl.compile（）；
var northEastPanel=新的外部面板({
弹性：1，
自动高度：正确，
边界：错，
框架：对，
布局：'形式'，
项目：[第三方物流]
});

---

谢谢，Y_Y

项目配置仅适用于外部组件。您必须将生成的html代码放入

面板的
html
配置中：

var generatedHtml = tpl.apply({
    name:'smith',
    age:21
});

var northEastPanel = new Ext.Panel({
    // not items but html:
    html: generatedHtml,
    // ...
});

项
配置仅适用于Ext组件。您必须将生成的html代码放入
面板的
html
配置中：

var generatedHtml = tpl.apply({
    name:'smith',
    age:21
});

var northEastPanel = new Ext.Panel({
    // not items but html:
    html: generatedHtml,
    // ...
});