Sencha Combo DisplayTpl

Question

In my combobox i have something like this:

displayTpl: Ext.create('Ext.XTemplate',
                                    '<tpl for=".">',
                                        '{Nome} ({Valor})', 
                                    '</tpl>')

It works fine except that if there isn't a pre-selected value for the combo, it shows this "()"

So i've tried to create a template that when the value is empty then it show nothing like this:

displayTpl: Ext.create('Ext.XTemplate',
                                    '<tpl for=".">',
                                        '<tpl if="this.isEmpty({Nome})">',
                                            '',
                                        '<tpl else>',
                                            '{Nome} ({Valor})',
                                        '</tpl>',
                                    '</tpl>',
                                    {
                                        isEmpty: function (value) {
                                            return value == '';
                                        }
                                    })

But i keep getting a error message "Expected :" when the tpl is evaluated (extjs-all-debug)

compile: function (tpl) {
    var me = this,
        code = me.generate(tpl);

    return me.useEval ? me.evalTpl(code) : (new Function('Ext', code))(Ext);

Any ideas on how to do this?

score 3 · Answer 1 · answered Oct 18 '12 at 13:20

3

You don't need the { } for the expression in the tpl tag. So try this template instead:

'<tpl for=".">',
    '<tpl if="this.isEmpty(Nome)">',
        '',
    '<tpl else>',
        '{Nome} ({Valor})',
    '</tpl>',
'</tpl>'

answered Oct 18 '12 at 13:20

Telgin

1,614
10
10

I've tried this already it doesn't do anything... Although it does stop the error from showing up :) – Miguel Teixeira Oct 18 '12 at 13:22
@MiguelTeixeira That's pretty mysterious then. As far as I know this should be the correct template. Have you tried putting a console.log in the isEmpty function to verify that it's even getting called and what's being passed to it? That's where I'd start at this point. – Telgin Oct 18 '12 at 13:27
1

@MiguelTeixeira That is very strange then. What happens if you try moving the comparison to the if statement itself? Try using tpl if="Nome == ''" instead of using the template member function. – Telgin Oct 18 '12 at 13:35
This throws an syntax exception when the tpl is evaluated – Miguel Teixeira Oct 18 '12 at 13:43
@MiguelTeixeira Hmm, looks like the formatting got screwed up in my comment. Are you using single quotes or double quotes? You have to escape double quotes I know, and maybe single quotes as well. So: tpl if="Nome == \"\"". – Telgin Oct 18 '12 at 13:44
Was the double quotes generating the error. But with the single quotes produces the same results... – Miguel Teixeira Oct 18 '12 at 13:49
@MiguelTeixeira I'm afraid I don't know what the problem is then. :( It sounds like it's a deeper issue than the template itself, possibly related to the way that the combobox is feeding values to the template. This may have changed with ExtJS4, which I don't know that much about unfortunately. – Telgin Oct 18 '12 at 13:55

score 0 · Accepted Answer · answered Oct 18 '12 at 14:01

I've solve it :)

displayTpl: Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                '<tpl if="Nome != \'\'">',
                    '{Nome} ({Valor})',
                '<tpl else>',
                    '',
                '</tpl>',
            '</tpl>'
        )

Since i can't seem to understand what value is being passed to the combo i figure if it's different from empty then return the structure i want, if not then return ''

Sencha Combo DisplayTpl

2 Answers2