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

问题描述

我有一个自定义组件，我用这样的xtemplate设置html

I got a custom component in which i set the html with an xtemplate something like this

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

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

I want to add some textfields to my XTemplate too and i cant figure out how to do this.

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

请帮助 - 我不知道如何继续。无法在网上找到解决方案。

如果您需要任何进一步的信息，请不要犹豫！

please help - i dont know how to continue. couldnt find a solution in the web.
If you need any further information, dont hesitate to ask!

推荐答案

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

Here is a workaround. Tested with ExtJS 4.2.2.

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

You have to add to the template some container with an ID or a class name (e.g. <li class="custom-text-field"></li>). Then add handler for render event of your custom component. The handler will automatically insert your text field right after the template is rendered.

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

这篇关于ExtJS 4.2.1 - 将文本字段添加到XTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！