Question

我获得了一个包含Ext.Component视图的自定义XTemplates。我确实需要控制器外部的一些theese模板。

是否可以在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()   
});

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

请！

Answer 1

根据链接，您应该可以将它直接放在XTemplate中。不需要静力学

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

Multiple templates in Nested List

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

如果您尝试放置逻辑或条件tpl运算符，即＆lt; tpl for =“parent.someVar”＆gt; ...＆lt; / tpl＆gt;在任何子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();
    }
});

Answer 2

您的代码无效，因为主模板的apply方法在之前被称为类定义（即define方法）甚至被调用。

您可以在后创建函数中创建使用该类的其他静态成员的静态模板（请参阅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(); } }); });

ExtJS 4.2.1 XTemplate和subtemplates（静态）

2 个答案: