3

我有一个自定义组件，在其中我使用类似这样的 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>';
            }
        })

请帮忙 - 我不知道如何继续。在网上找不到解决方案。
如果您需要任何进一步的信息，请不要犹豫！

4

1 回答 1

1

这是一种解决方法。使用 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-09T07:20:26.290 回答