Ext.field.Select

Is there a way to have the display of the selected item output using HTML or a XTemplate?

There is no easy way to do this. I suggest you to extend Ext.field.Select and override the getPhonePicker and getTabletPicker methods.

For the phone picker, you can pass an itemTpl into the slot configuration instead of a displayField.

For the tablet picker, you can simply change the existing itemTpl.

Something like this:

Code:

---

Ext.define('RD.field.Select', {
    extend: 'Ext.field.Select',

    getPhonePicker: function() {
        var config = this.getDefaultPhonePickerConfig();

        if (!this.picker) {
            this.picker = Ext.create('Ext.picker.Picker', Ext.apply({
                slots: [{
                    align: 'center',
                    name: this.getName(),
                    valueField: this.getValueField(),
                    value: this.getValue(),
                    store: this.getStore(),

                    // change this
                    itemTpl: '<strong>{' + this.getValueField() + '}</strong>'
                }],
                listeners: {
                    change: this.onPickerChange,
                    scope: this
                }
            }, config));
        }

        return this.picker;
    },

    // @private
    getTabletPicker: function() {
        var config = this.getDefaultTabletPickerConfig();

        if (!this.listPanel) {
            this.listPanel = Ext.create('Ext.Panel', Ext.Object.merge({
                centered: true,
                modal: true,
                cls: Ext.baseCSSPrefix + 'select-overlay',
                layout: 'fit',
                hideOnMaskTap: true,
                items: {
                    xtype: 'list',
                    store: this.getStore(),

                    // change this
                    itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',

                    listeners: {
                        select : this.onListSelect,
                        itemtap: this.onListTap,
                        scope  : this
                    }
                }
            }, config));
        }

        return this.listPanel;
    }
});

---

Robert, thanks for the quick reply. I'll give that a try.