1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Belarus, Gomel
    Posts
    42
    Vote Rating
    -1
    Answers
    3
    dmitryfisko is an unknown quantity at this point

      0  

    Default Answered: Can't change select field form style.

    Answered: Can't change select field form style.


    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.

  2. 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.

    Code:
        // @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;
        },

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    May 2012
    Location
    Belarus, Gomel
    Posts
    42
    Vote Rating
    -1
    Answers
    3
    dmitryfisko is an unknown quantity at this point

      0  

    Default


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

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    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.

    Code:
        // @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;
        },

  6. #5
    Sencha User
    Join Date
    May 2012
    Location
    Belarus, Gomel
    Posts
    42
    Vote Rating
    -1
    Answers
    3
    dmitryfisko is an unknown quantity at this point

      0  

    Default


    Thank you very much.

Thread Participants: 1