EXTjs manipulate data displayed in a combobox

Question

Good day all, I'm into a new project previously done in EXTjs, I'm new to this, and I'm trying to get in track on anything.

My problem today is this: I had a panel with a defined tpl, in which there was a couple of functions that manipulate the classes in the tpl (displaying an icon instead of another if a certain variable was true or false). Now I had to translate the same logic into a combobox, I had some problems with it:

if I use the tpl, I obtain the same visual result, but I can't select any item:

tpl: [
    '<tpl for=".">',
        '<div class="x-publisher {[this.renderColor(values.visible)]}">',
            '<div class="x-publisher-text">{name}</div>',
            '<div class="x-publisher-close fa {[this.renderIcon(values.visible)]}"></div>',
        '</div>',
    '</tpl>',
    '<div class="x-clear"></div>',
    {
        disableFormats: true,
        renderColor: function(visible){
            return visible ? 'visible' : '';
        },
        renderIcon: function(visible){
            return visible ? 'fa-eye-slash' : 'fa-eye'
        }
    }
],
itemSelector: 'div.x-publisher',
listeners: {
     select: 'somefunctioncalled'

},

I understand that with the combobox I must use the listconfig and itemtpl thingy, this way:

listConfig: {
        itemTpl: [
            '<div class="x-publisher {visible}"><div class="x-publisher-text">{name}</div><div class="x-publisher-close fa fa-eye"></div></div>'

                ]

                }

but doing this, I learned that I can't define any function within itemtpl... so, my idea was to manipulate the {visible} variable before passeing it to the itemtpl.

the store is something like this:

store: { fields: [{ name:'name' }, { name: 'id', persist: false }, { name: 'regionalId' }, { name:'visible', type: 'boolean'}],
                                autoLoad: true,...

now, is there a (easy) way to transform that "visible" variable into the string "visible" if it is true or something else if it is false? or...is there a way to emulate the first behaviour, I mean adding some sort of custom function (I learned they are called memberfunctions) when I use the itemTpl? there is also the problem to change the icon, but I can ignore it at this stage.

can you help me? thanks in advance.

Matteo Bononi 'peorthyr' Matteo Bononi 'peorthyr' · Accepted Answer · 2016-10-28T13:32:25

I have used some logic inside the itemtpl, seems to works as expected:

itemTpl: [
            '<div class="x-publisher',
            '<tpl if="visible == true"> visible</tpl>',
            '"><div class="x-publisher-text">{name}</div><div class="x-publisher-close fa fa-eye"></div></div>'

        ]

EXTjs manipulate data displayed in a combobox

1 Answers