[英]ExtJS 4.2.1 - add textfield to an XTemplate
我有一個自定義組件,我在其中設置了一個像這樣的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>';
}
})
請幫助 - 我不知道如何繼續。 無法在網絡上找到解決方案。
如果您需要任何進一步的信息,請不要猶豫!
這是一個解決方法。 使用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()
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.