Can't change select field form style.

[dmitryfisko]

Hi everyone.
I want to when you click on the icon button buttonIcon.png shows pop up menu popUpMenu.png as like select field form SelectField.png. I tried to do it by changing the style of seleсt field form (using the css, turn "icon button" to "select field"), but not well. Please help me solve this problem.

P.S. Sorry for my English.

[jerome76]

You can create a floating Ext.Panel, shown in the first example on that page, and add a list to it to emulate the same style like the Ext.field.Select form.

[dmitryfisko]

Thank you for your reply. But is there a way to directly show this pop up menu (event or function)?

[jerome76]

If you look at the source of Ext.field.Select, it looks like it uses a Picker or Panel and calls .show() or showBy() of that depending on the device.

    // @private
    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(),
                    displayField: this.getDisplayField(),
                    value       : this.getValue(),
                    store       : this.getStore()
                }],
                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.apply({
                centered: true,
                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() + ':htmlEncode}</span>',
                    listeners: {
                        select : this.onListSelect,
                        itemtap: this.onListTap,
                        scope  : this
                    }
                }
            }, config));
        }


        return this.listPanel;
    },

[dmitryfisko]

Thank you very much.