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

Posted 2023-02-26

【中文标题】无法将 Ext.form.TextField 呈现到 XTemplate 的输出中

【英文标题】：Unable to render a Ext.form.TextField into the output of an XTemplate

【发布时间】：2013-09-30 23:51:20

【问题描述】：

我想将一些 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 文本字段？

注意。我正在使用 ExtJS 3.3.1 并且没有机会升级版本。我相信 ExtJS 4 的功能会让我做的事情变得更容易。

谢谢！

【参考方案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（这是传递给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;
            
        
    

在上面的代码中，您可以看到，ct 总是被调用，尽管位置不为空。

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

【讨论】：

谢谢洛洛。我没有意识到我从来没有回复过这个。对不起:)