ExtJS的4.2.1 - 添加文本框到XTemplate

我得到了我設定的HTML與xtemplate像這樣ExtJS的4.2.1 - 添加文本框到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>'; 
      } 
     })

請幫助 - 我不知道如何繼續。無法在網上找到解決方案。
如果您需要更多信息，請不要猶豫，問問！

來源

2013-09-23 JuHwon

通過textfield你的意思是'Ext.form.field.Text'，對吧？ –

是的 - 類似的東西。我想要一個自定義登錄下拉菜單中的我的標題中的快速登錄。 – JuHwon

你知道怎麼做@MolecularMan嗎？ – JuHwon

這是一種解決方法。使用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() 
});

來源

2013-10-09 07:20:26

ExtJS的4.2.1 - 添加文本框到XTemplate

回答

相關問題