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

я также не знаю, как я могу применять подшаблоны, которые являются членами представления. Я объявил их глобальными правами, что мне действительно не нравится делать.

пожалуйста!


javascript templates static extjs extjs4.2
person JuHwon    schedule 21.06.2013    source источник
comment
Я не вижу проблемы с предложенным вами решением... За исключением, возможно, вам следует использовать app.view.ApplicationHeader.mainIconTpl вместо view.mainIconTpl, который, вероятно, не определен. Какой провал вы получаете?   -  person rixo    schedule 21.06.2013
comment
проблема в том, что я не получаю контекст своего представления в этих функциях XTemplate...:/   -  person JuHwon    schedule 24.06.2013
comment
я не знаю, как получить статические шаблоны в моем XTemplate, если они находятся в одном и том же представлении.. я не могу использовать this.self... потому что это уже XTemplate   -  person JuHwon    schedule 24.06.2013
comment
app тоже не определен..   -  person JuHwon    schedule 24.06.2013

Ответы (2)


arrow_upward
1
arrow_downward

Ваш код не работает, поскольку метод apply основного шаблона вызывается до определения класса (то есть метода define).

Вы можете создать свой статический шаблон, который использует другие статические члены класса в функции post-create (см. последний параметр defineметод).

Затем, чтобы шаблон был доступен, я бы переопределил метод 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();
        }
    });

});
person rixo    schedule 24.06.2013

arrow_upward
1
arrow_downward

Согласно ссылке, вы сможете поместить это прямо в свой XTemplate. Статика не нужна

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

Несколько шаблонов во вложенном списке

Вы также можете попробовать поместить все эти XTemplates в initComponent вместо этого, поскольку вы не вводите никаких значений для XTemplate после начального рендеринга компонента. Метод apply() просто вернет вам фрагмент HTML, который можно добавить в любом месте XTemplate.

Если вы пытаетесь поместить логические или условные операторы tpl, например, ‹tpl for="parent.someVar"›...‹/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();
    }
});
person radtad    schedule 21.06.2013
comment
Моя идея для статистики заключалась в том, что мне нужно повторно отобразить только один подшаблон в контроллере компонента. есть ли лучшее решение для этого? у меня есть условные операторы tpl, но я не думаю, что это проблема. - person JuHwon; 21.06.2013