ExtJS 4.2.1 - добавить текстовое поле на XTemplate

Question

Я получил пользовательский компонент, в котором я установить HTML с XTemplate что-то вроде этого

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.

Вы должны добавить в шаблон контейнер с идентификатором или именем класса (например, <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() 
});