javascript - ExtJS 4.2.1 XTemplate 和子模板(静态)

Question

我得到了一个带有 View XTemplates 的自定义 Ext.Component。在我的 Controller 的 View 之外，我也确实需要一些这些模板。

是否可以在 XTemplate 的函数中引用静态成员。或者还有其他更好的方法吗？？？

像这样:

Ext.define('app.view.ApplicationHeader', {
    extend: 'Ext.Component',
    name: 'app-header',
    xtype: 'app-header',

    height: 67,
    margin: 0,

    statics: {
        mainIconTpl: new Ext.XTemplate('someTemplate'),

        navigationItemsTpl: new Ext.XTemplate( 'anotherTemplate'),

        userInfoTpl: new Ext.XTemplate('userTemplate')
    },

    html: new Ext.XTemplate('... {[ this.renderMainIcons() ]} {[ this.renderUserInfo() ]} ...',
            '... {[ this.renderNavigationBarItems() ]} ...',
            {
                me: this,
                renderMainIcons: function () {
                    return view.static.mainIconTpl.apply(MR.Sitemap.Items);
                },
                renderUserInfo: function () {
                    return view.static.userInfoTpl.apply();
                },
                renderNavigationBarItems: function () {
                    return view.static.navigationItemsTpl.apply();
                }
            }).apply()   
});

我也不知道如何应用作为 View 成员的子模板。我宣布他们是全局知情权，我真的不喜欢这样做。

拜托!

Answer 1

您的代码无法正常工作，因为在类定义(即 define 方法) 之前调用了主模板的 apply 方法甚至打电话。

您可以在创建后函数中创建使用类的其他静态成员的静态模板(请参阅 define method 的最后一个参数)。

然后为了使模板可用，我将覆盖 initComponent 方法并在那里设置 html 属性。

Ext.define('app.view.ApplicationHeader', {
    extend: 'Ext.Component',
    name: 'app-header',
    xtype: 'app-header',

    height: 67,
    margin: 0,

    statics: {
        mainIconTpl: new Ext.XTemplate('someTemplate'),
        navigationItemsTpl: new Ext.XTemplate('anotherTemplate'),
        userInfoTpl: new Ext.XTemplate('userTemplate')
    },

    initComponent: function() {

        // Here, your statics are available, and you're in the scope of your
        // class *instance*
        this.html = this.self.viewTemplate.apply();

        this.callParent(arguments);
    }

}, function() {

    // In the post create function, this is the class constructor
    // (i.e. app.view.ApplicationHeader)
    var cls = this;

    // In fact, you could also create your sub templates here if you prefer
    // e.g.
    // cls.useInfoTpl = new Ext.XTemplate('userTemplate')

    // So, viewTemplate will be a static property of the class
    cls.viewTemplate = new Ext.XTemplate('... {[ this.renderMainIcons() ]} {[ this.renderUserInfo() ]} ...',
        '... {[ this.renderNavigationBarItems() ]} ...', {
        renderMainIcons: function() {
            return cls.mainIconTpl.apply();
        },
        renderUserInfo: function() {
            return cls.userInfoTpl.apply();
        },
        renderNavigationBarItems: function() {
            return cls.navigationItemsTpl.apply();
        }
    });

});