ExtJS 4.2.1 - add textfield to an XTemplate

Question

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

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

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!

Answer 1

Here is a workaround. Tested with ExtJS 4.2.2.

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