Templates ExtJS组件的模板（.tpl）何时呈现？

我正在尝试将另一个组件注入到由另一个CooComponent的模板呈现的元素中。但是在afterrender事件中，该模板尚未呈现，因此对Ext.get（el id）的调用返回null:

TypeError el为null

   tpl: 
    new Ext.XTemplate(
      '<tpl for=".">',
        '<ul>',
          '<li class="lang" id="cultureSelector-li"></li>',
        '</ul>',

      '</tpl>'
      ),

  listeners: {
    afterrender: {
      fn: function (cmp) {
        console.log(Ext.get('cultureSelector-li')); // < null :[
        Ext.create('CultureSelector', { 
          renderTo: 'cultureSelector-li' 
        });
      }
    }
  },

tpl：
新Ext.XTemplate(
'',
“
”，
“
”，
“
”，
''
),
听众：{
后渲染：{
fn：功能（cmp）{
console.log（Ext.get（'cultureSelector-li'）；//

---

那么，我什么时候可以添加此组件，以便在DOM中创建元素目标？

我认为这取决于您正在使用的组件。例如，数据网格视图有一个“viewready”事件可以满足您的需要，并且根据您的尝试，“boxready”函数可以用于combo box除此之外，您可以在元素的父类中搜索正在调用的XTemplate呈现函数（可能在布局管理器中），并将其扩展以在那里触发事件，也可以冒竞争条件的风险，在setTimeout（）中执行此操作调用时有一个合理的延迟。

我最终不得不自己做这项工作。因此，我现在将模板作为一个名为

theTpl

的属性，然后在

渲染前

中渲染它，然后在

渲染后

中获得元素的句柄。这似乎完全违反直觉，有人有什么见解吗

beforeRender: {
      fn: function (me) {
        me.update(me.theTpl.apply({}));
      }
    },

编辑事实上，我只是扩展了组件，因此：

Ext.define('Ext.ux.TemplatedComponent', {
  extend: 'Ext.Component',
  alias: 'widget.templatedComponent',
  template: undefined,
  beforeRender: function () {
    var me = this;
    var template = new Ext.XTemplate(me.template || '');
    me.update(template.apply(me.data || {}));
    me.callParent();
  }
})

---

…

模板

接受一系列html片段

结果表明我使用了错误的东西-显然我们应该使用render*配置来处理这种类型的东西（那么

tpl

和

数据

配置是为了什么呢？）

以下是sencha论坛为我提供的一把小提琴：

---

这是一个bog标准

Ext.Component

。setTimeout（）idea感觉不对劲。似乎AbstractComponent的.update方法使用了.tpl，但我还无法跟踪调用的时间和时间。updateapparently它没有被调用。不知道是否需要任何提示来触发它。我是根据这篇文章完成这项工作的