Results 1 to 5 of 5

Thread: Can't change select field form style.

  1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Belarus, Gomel
    Posts
    42
    Answers
    3
    Vote Rating
    -1
      0  

    Default 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
    Answers
    132
    Vote Rating
    101
      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
    Answers
    3
    Vote Rating
    -1
      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
    Answers
    132
    Vote Rating
    101
      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
    Answers
    3
    Vote Rating
    -1
      0  

    Default

    Thank you very much.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •