4

我正在尝试将另一个组件注入到由另一个 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 中创建目标元素？

4

3 回答 3

0

我认为这取决于您正在使用的组件。例如，Data Grid View 有一个“viewready”事件可以满足您的需求，并且根据您的尝试，“boxready”功能可以用于组合框（尽管只有第一个渲染）。除此之外，您可以通过元素的父类搜索被调用的 XTemplate 渲染函数（可能在布局管理器中）并将其扩展以在那里触发事件，或者冒着竞争条件并在setTimeout() 以合理的延迟调用。

于 2012-10-25T14:04:30.943 回答
0

我最终不得不自己做这项工作。所以，我现在将模板作为一个名为 的属性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 片段数组

于 2012-10-25T14:17:32.377 回答
0

原来我使用了错误的东西——显然我们应该为这种类型的东西使用 render* 配置（那么tpl&data配置是干什么用的？）

这是sencha论坛为我提供的一个工作小提琴：

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

于 2012-10-26T10:24:50.980 回答