ExtJS 4.2.1 - 将文本字段添加到XTemplate

Question

我有一个自定义组件，我在其中设置了一个像这样的xtemplate的html

Ext.apply(me, { html: mainTpl.apply() });

我想在我的XTemplate中添加一些文本字段，我无法弄清楚如何做到这一点。

new Ext.XTemplate('<div Class="TopHeaderUserInfo"><div id="TopHeaderLanguageDiv" ><div Class="ActiveLanguageFlag" lang="{[ this.getLanguage() ]}"  ></div>' +
        '<ul Class="LangSelectDropDown HeaderDropDown" style="position:absolute;"><li class="ListHeader">' + MR.locale.SelectLanguage + '</li>{[ this.renderLanguageItems() ]}</ul>' +
        '</div>{[this.renderUserInfo()]}</div>',
        {
            ...
            ...
            ...
            renderUserInfo: function () {
                return (MR.classes.CurrentUser.user == null ?
                    '<div Class="LogInOut" Id="TopHeaderLoginLogoutLink"><a Class="Login">' + MR.locale['Login'] :
                    '<span>Welcome, ' + MR.classes.CurrentUser.getUser().get('FullName') + '</span> <a Class="Logout">' + MR.locale['Logout']) + '</a>' +
                    '<ul Class="HeaderDropDown LoginDropDown" style="position:absolute;"><li class="ListHeader">Header</li>' +

                    // INSERT TEXTFIELD HERE

                    '</ul>' +
                    '</div>';
            }
        })   

请帮助 - 我不知道如何继续。 无法在网络上找到解决方案。
如果您需要任何进一步的信息，请不要犹豫！

Answer 1

这是一个解决方法。 使用ExtJS 4.2.2进行测试。

您必须向模板添加一个具有ID或类名的容器（例如<li class="custom-text-field"></li> ）。 然后为自定义组件的render事件添加处理程序。 处理程序将在呈现模板后立即自动插入文本字段。

Ext.define('MyComponent', {
    extend: 'Ext.container.Container',

    initComponent: function() {
        var me = this,
            // just create a textfield and do not add it to any component
            text = Ext.create('Ext.form.field.Text');

        var mainTpl = new Ext.XTemplate("<div>{[this.renderUserInfo()]}</div>", {
            renderUserInfo: function() {
                return '<ul>' + 
                       '<li class="custom-text-field"></li>' + 
                       '</ul>';
                }
            }
        );
        me.html = mainTpl.apply();

        // postpone text field rendering
        me.on('render', function() {
            // render text field to the <li class=".custom-text-field"></li>
            text.render(me.getEl().down('.custom-text-field'));
        });
        this.callParent();
    }
});

Ext.getBody().setHTML('');
Ext.create('MyComponent', {
    renderTo: Ext.getBody()
});