1

我想将一些 Ext 组件渲染到XTemplate. 我们希望能够灵活地使用 anXTemplate来呈现 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但是，如果我更改to的最后一行，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)

我有点困惑，因为从文档中我可以看出，调用的render()方法将是相同的（来自Ext.Component）。但是我玩了一些游戏，似乎无法追踪这里发生的事情。

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

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

谢谢！

4

1 回答 1

1

Solution is quite simple - use form.render(id) instead of form.render(html, id).

See [api][1] if you have doubts.

The reason why button is rendering properly is that it has weird onRender implementation, different from Component.

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

As you can see in code above, if you provide position (which is basically second argument provided to render) it doen't use ct (which is first argument passed to render).

In normal component onRender method looks like this:

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

In code above, you can see, that ct is called always, despite the position is not null.

The bottom line is that rendering of button works by accident.

于 2013-11-07T08:30:40.390 回答