[英]ExtJS 4.2.1 - add textfield to an XTemplate
I got a custom component in which i set the html with an xtemplate something like this 我有一个自定义组件,我在其中设置了一个像这样的xtemplate的html
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. 我想在我的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>';
}
})
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! 如果您需要任何进一步的信息,请不要犹豫!
Here is a workaround. 这是一个解决方法。 Tested with ExtJS 4.2.2.
使用ExtJS 4.2.2进行测试。
You have to add to the template some container with an ID or a class name (eg <li class="custom-text-field"></li>
). 您必须向模板添加一个具有ID或类名的容器(例如
<li class="custom-text-field"></li>
)。 Then add handler for render
event of your custom component. 然后为自定义组件的
render
事件添加处理程序。 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()
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.