Hybrid View

  1. #1
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    Answers
    1
    nak1 is an unknown quantity at this point

      0  

    Default Unanswered: Ext.field.Select

    Unanswered: Ext.field.Select


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

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    Answers
    93
    rdougan will become famous soon enough

      0  

    Default


    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;
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    Answers
    1
    nak1 is an unknown quantity at this point

      0  

    Default


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

Thread Participants: 1