Как вызвать функции в XTemplate (itemTpl)

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

например:

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>' + Ext.String.ellipsis( + '{post_text_teaser}' + , 4) + '</p>',
    ...
].join(''),

но, конечно, конкатенация в строке 10 незаконна.

знаете ли вы, возможно ли это или как это сделать правильно?

14
extjs extjs4 javascript sencha-touch sencha-touch-2

3 ответов

Это должно решить вашу проблему:

    '<tpl switch="post_type">',
        '<tpl case="new_user">',
            '<p>{post_text_teaser}</p>',
            '<p>{timestamp}</p>',
        '<tpl default>',
            '<p>{[Ext.String.ellipsis(values.post_text_teaser,4,false)]}</p>',
    '</tpl>'

вы можете найти более подробную информацию о XTemplate на Sencha Docs

дело с функцией-членом шаблона заключается в том, что, насколько я знаю, вы не можете определить их непосредственно в itemTpl обычным способом, но нужно явно определить новый XTemplate, а затем использовать его в itemTpl. См. пример:

var tpl = new XTemplate(
    '<tpl switch="post_type">',
        '<tpl case="new_user">',
            '<p>{post_text_teaser}</p>',
            '<p>{timestamp}</p>',
        '<tpl default>',
            '<p>{[this.shorten(values.post_text_teaser)]}</p>',
    '</tpl>',
    {        
        shorten: function(name){
           return Ext.String.ellipsis(name,4,false);
        }
    }
);

...

itemTpl: tpl,

...

пример Senchafiddle

этот должен работать нормально, как и код ниже (просто вставьте код из XTemplate выше). 

itemTpl: new XTemplate(...),

пример Senchafiddle

надеемся, что эта sortens это!

редактировать заметил, что я пропустил закрывающие теги, иногда он работает без них, но это хорошая практика, чтобы всегда использовать их, поскольку они могут вызвать интересные ошибки (в этом случае отсутствует скобка на сгенерированном коде).

18

Примечание: приведенный ниже пример работает не так, как ожидалось! Посмотреть zelexir отвечать за разъяснения!

вы можете использовать memberfunctions

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>{[this.doAction(post_text_teaser)]}</p>',
    ...,
    {
        // XTemplate configuration:
        disableFormats: true,
        // member functions:
        doAction: function(name){
           return Ext.String.ellipsis(name + "\", 4);
        }
    }
]
1

вы можете использовать функцию внутри шаблона

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>{[this.concatenate(values.post_text_teaser)]}</p>',
    ...,
    {
        concatenate: function(teaser) {
               return Ext.String.ellipsis( + teaser + \, 4);
        }
    }
]
0