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

【问题标题】：ExtJS 4.2.1 - add textfield to an XTemplateExtJS 4.2.1 - 将文本字段添加到 XTemplate
【发布时间】：2013-09-23 10:19:11
【问题描述】：

我有一个自定义组件，我在其中使用类似这样的 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>';
            }
        })

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

【问题讨论】：

文本字段是指Ext.form.field.Text，对吧？
是的 - 类似的东西。我想要一个自定义登录下拉菜单，以便在我的标题中快速登录。
你知道怎么做吗@MolecularMan？
我想唯一可能的方法是在 xtemplate (f.i. <div id="textfield-placeholder"></div>) 中指定一些占位符，并在渲染 xtemplate 后创建文本字段并将其渲染在该占位符内。
... though i dont know how or WHERER/WHEN i render my Textfields to them 随时随地执行此操作，但在呈现带有占位符的 xtemplate 之后。 ... i dont know how ... i render my Textfieldsdocs.sencha.com/extjs/4.2.0/#!/api/…

标签： javascript templates extjs4 extjs4.2

【解决方案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()
});

【讨论】：