Question

我想将一些Ext组件渲染到XTemplate的输出中。我们希望能够灵活地使用XTemplate来呈现HTML，但保留使用Ext组件而不是普通旧HTML元素的样式，行为和处理程序。

我目前使用Ext.Button成功完成此操作。在模板中，我正在写一个占位符div，如下所示：
<div id="paceholder-1"></div>

在模板上调用apply()之后，我创建了一个新的Ext组件并将其渲染为：

this._replacePlaceholders.defer(1, this, [html, 'placeholder-1', collection]);

_replacePlaceholders函数如下所示：

_replacePlaceholders: function(html, id, collection) {

    var emailField = new Ext.form.TextField({
        emptyText: 'Email address',
        hideLabel: true
    });

    var downloadButton = new Ext.Button({
        text: 'Download as...',
        icon: 'images/down.png',
        scope: this,
        menu: this._createDownloadOptionsMenu(collection) // Create Menu for this Button (works fine)
    });

    var form = new Ext.form.FormPanel({
        items: [emailField, downloadButton]
    });

    downloadButton.render(html, id);
}

这样可以正确地将按钮渲染到html中。按钮菜单按预期运行。

但如果我将replacePlaceholders的最后一行更改为emailField.render(html, id);或form.render(html, id);，则会出现javascript错误。

TypeError: ct is null
ct.dom.insertBefore(this.el.dom, position);
ext-all-debug.js (line 10978)

我有点困惑，因为我可以从docs告诉我所谓的render()方法是同一个（来自Ext.Component）。但是我已经玩了一些游戏，似乎无法追踪到这里发生的事情。

那么为什么这些组件的行为与Ext.Button不同？是否可以呈现Ext.form.TextField或Ext.form.FormPanel或任何，这将让我在mt XTemplate html中使用Ext文本字段？

NB。我正在使用ExtJS 3.3.1并且没有机会升级版本。我相信ExtJS 4具有的功能可以让我做得更轻松。

谢谢！

Answer 1

解决方案非常简单 - 使用form.render(id)代替form.render(html, id)。

如果您有疑问，请参阅[api] [1]。

按钮正确呈现的原因是它具有奇怪的onRender实现，与Component不同。

onRender : function(ct, position){
    [...]
    if(position){
        btn = this.template.insertBefore(position, targs, true);
    }else{
        btn = this.template.append(ct, targs, true);
    }
    [...]
}

正如您在上面的代码中看到的，如果您提供位置（基本上是提供给render的第二个参数），它不会使用ct（这是传递给{{1}的第一个参数}）。

在正常组件render中，方法如下所示：

onRender

在上面的代码中，您可以看到，尽管位置不为空，但始终会调用onRender : function(ct, position){ [...] if(this.el){ this.el = Ext.get(this.el); if(this.allowDomMove !== false){ ct.dom.insertBefore(this.el.dom, position); if (div) { Ext.removeNode(div); div = null; } } } }。

底线是按钮的渲染是偶然的。

无法将Ext.form.TextField呈现到XTemplate的输出中

1 个答案: