Select Field and tpl

[nak1]

I noticed in the documentation that the Ext.field.Select has a tpl attribute. I'm unclear as to what it does, however, I was wondering if there was a way to use it instead of the displayField value? If not is there another option that might allow for HTML when displaying the selected item?

[mitchellsimoens]

tpl is inherited and should be removed from the Select field.

Currently you would have to override the getTabletPicker method (or define your own on the listPanel property) to access the list. Currently, the getTabletPicker method looks like:

    getTabletPicker: function() {
        if (!this.listPanel) {
            this.listPanel = Ext.create('Ext.Panel', {
                top     : 0,
                left    : 0,
                modal   : true,
                cls     : Ext.baseCSSPrefix + 'select-overlay',
                layout  : 'fit',
                hideOnMaskTap: true,
                items: {
                    xtype: 'list',
                    store: this.getStore(),
                    itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',
                    listeners: {
                        select : this.onListSelect,
                        itemtap: this.onListTap,
                        scope  : this
                    }
                }
            });
        }

        return this.listPanel;
    },

So you would have to override it and change the itemTpl on the list. As I said, you could also create a Panel with a list and put it on the listPanel property of the Select field.

Going further, there is going to be a new defaultTabletPickerConfig that you can use but you would have to do this:

defaultTabletPickerConfig : {
    items : {
        xtype: 'list',
        store: this.getStore(),
        itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',
        listeners: {
            select : 'onListSelect',
            itemtap: 'onListTap'
        }
    }
}

The issue I see there is the scoping of the listeners. If that doesn't work then you would have to define your own getDefaultTabletPickerConfig method on the select field:

getDefaultTabletPickerConfig : function() {
    return {
        items : {
            xtype: 'list',
            store: this.getStore(),
            itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',
            listeners: {
                select : this.onListSelect,
                itemtap: this.onListTap,
                scope: this
            }
        }
    };
}

[nak1]

Looking on the code, couldn't I simply override the getDisplayField method?

[mitchellsimoens]

If you take into account that this.getDisplayField() is wrapped with '{' and '}' already so you are restricted a little.