Javascript ExtJS 4.2.1 XTemplate和子模板（静态）

我得到了一个自定义的

Ext.Component

，其中有一个视图

XTemplates

。我确实需要一些在我的控制器视图之外的模板

是否可以在

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()   
});

我也不知道如何应用作为视图成员的子模板。我宣布他们是全球性的，我知道我真的不喜欢做什么

---

求你了

根据链接，您应该能够将其直接放在XTemplate中。不需要静力学

{[ MyApp.tpls.someOtherTpl.apply(values) ]}

您也可以尝试将所有这些XTemplate放在initComponent中，因为在初始组件呈现之后，您不会为XTemplate注入任何值。apply（）将只返回一个HTML片段，该片段应该能够附加到XTemplate中的任何位置

如果您试图放置逻辑或条件tpl运算符，即。。。在任何一个子XTemplates中，这都是另一个问题，所以这完全取决于您试图实现的目标

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

    height: 67,
    margin: 0,

    initComponent: function() {
        var me = this,
        me.mainIconTpl = new Ext.XTemplate('someTemplate'),
        me.navigationItemsTpl = new Ext.XTemplate( 'anotherTemplate'),
        me.userInfoTpl = new Ext.XTemplate('userTemplate');

        me.tpl = new Ext.XTemplate(
            '...', me.mainIconTpl.apply(MR.Sitemap.Items), 
            '...', me.navigationItemsTpl.apply(someValues), 
            '...', me.userinfoTpl.apply(someValues), 
            '...'
        );

        Ext.apply(me, {
             html: me.tpl
        });

        me.callParent();
    }
});

---

您的代码不起作用，因为主模板的

apply

方法在类定义（即

define

方法）被调用之前被调用

您可以在post create函数中创建使用类的其他静态成员的静态模板（请参阅的最后一个参数）

然后为了使模板可用，我将覆盖

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();
        }
    });

});

---

我对STATC的想法是因为我只需要在组件的控制器中重新加载一个子模板。有更好的解决办法吗？我确实有条件的第三方物流运营商，但我不认为他们是问题。我不认为你提出的解决方案有问题。。。除非您可能应该使用

app.view.ApplicationHeader.mainIconTpl

，而不是可能未定义的

view.mainIconTpl

。你遇到了什么样的失败？问题是我没有在这个XTemplate函数中获得我的观点的上下文…：/如果静态模板在同一视图中，我不知道如何在XTemplate中获取它们。。我不能同意这个，赛尔夫。。。因为这已经是XTemplate

app

了，所以也没有定义。。