Question

我正在尝试将另一个组件注入由另一个Coomponent的模板呈现的元素中。但是在afterrender事件中，模板尚未呈现，因此对Ext.get（el-id）的调用返回null：TypeError el is 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' 
        });
      }
    }
  },

那么我何时可以添加此组件以便在DOM中创建元素定位？

Answer 1

我认为这取决于您正在使用的组件。例如，数据网格视图具有＆＃34; viewready＆＃34;可满足您的需求的活动，以及您正在尝试的内容，＆＃34; boxready＆＃34;函数可以用于组合框（虽然只有第一个渲染）。除此之外，你可以通过元素的父类来搜索被调用的XTemplate渲染函数（可能在布局管理器中）并扩展它以在那里触发事件，或冒险出现竞争条件在具有合理延迟的setTimeout（）调用中执行此操作。

Answer 2

我最终不得不自己做这项工作。所以，我现在将模板作为名为theTpl的属性，然后在beforerender中进行渲染，然后我就可以获得afterrender中元素的句柄。这看起来完全违反直觉，有没有人有任何见解？

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

编辑实际上我只是扩展了Component：

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

... template接受一系列html片段

Answer 3

原来我使用了错误的东西 - 显然我们应该使用render * configs来处理这类事情（那么tpl＆amp; data配置是什么？）

这是来自sencha论坛的一个工作小提琴：

http://jsfiddle.net/qUudA/10/

何时为Ext JS组件呈现模板（.tpl）？

3 个答案: