ExtJS ComboBox dropdown width wider than input box width?

Question

Is there any way to set the width of an ExtJS (version 4) ComboBox's dropdown menu to be wider than that of the actual input box?

I have a comboxbox that i want to be around 200px but I have paging on the results dropdown and that width is not even big enough to show all the paging bar's controls.

Here's my code to create the combo:

var add_combo = Ext.create('Ext.form.field.ComboBox', 
    {
        id              : 'gbl_add_combo',
        store           : Ext.create('Ext.data.Store',
        {
            remoteFilter : true,
            fields : ['gb_id', 'title'],
            proxy  : 
            {
                type        : 'ajax',
                url         : 'index.php/store/get_items',
                reader      : 
                {
                    type            : 'json',
                    root            : 'records',
                    totalProperty   : 'total',
                    successProperty : 'success'
                },
                actionMethods : 
                {
                    read    : 'POST',
                    create  : 'POST',
                    update  : 'POST',
                    destroy : 'POST'
                }
            }
        }),
        listConfig:
        {
            loadingText: 'Searching...',
            emptyText: 'No results found'
        },
        queryMode       : 'remote',
        hideLabel       : true,
        displayField    : 'title',
        valueField      : 'gb_id',
        typeAhead       : true,
        hideTrigger     : true,
        emptyText       : 'Start typing...',
        selectOnFocus   : true,
        width           : 225,
        minChars        : 3,
        cls             : 'header_combo',
        pageSize        : 15
    });

Groundmass

added my code to the question – Groundmass

Answer 1

There are two parts to this. Firstly, you need to set matchFieldWidth: false in your combobox config. You can then specify width attributes in the listConfig section to style just the dropdown, while specifying the width of the combobox itself in the main config.

This varies from the pervious version, which just let you specify the listWidth property.

Microwatt

Hi Simon, I applied this solution, and though it allowed greater width for the template but then the list of values is not getting displayed now. I have posted the question here - #7526732 - could you guide at this if any idea. Thanks in advance. – Pas

I want the list width to auto adjust to the width of the longest entry in the combo store. This works when I use width: 'auto' but then the list is also narrower than the combobox when the entries are shorter. Is there some way that I can set the minWidth of the list to the width of its parent and get the auto to work only in case the entries are longer? – Urinate

And, if you develop for IE9 too. When you set matchFieldWidth to false and omit an maxWidth in the listConfig, IE9 will allow the dropdown's bound list to occupy the full width. Solution is it to provide a number to listConfig.maxWidth. – Oxtail

Answer 2

I didn't find way to change 'matchFieldWidth' property dynamically. So I found another solution:

 {
   xtype: 'combobox',
   fieldLabel: 'Short Options',
   queryMode: 'local',
   store: ['Yes', 'No', 'Maybe'],
   matchFieldWidth: false,
   listConfig: {
     listeners: {
       beforeshow: function(picker) {
         picker.minWidth = picker.up('combobox').getSize().width;
       }
     }
   }
 }

Source: http://www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth

Kalk

Answer 3

In ExtJS 7+ modern, you need to use the beforepickercreate event if you wish to control the width of the combobox's picker.

It's not very intuitive, but it works.

            xtype: 'combobox',
...
            listeners: {
                beforepickercreate: {
                    fn: function(cmp, newV) {
                        newV.listeners = {
                            beforeshow: function(cmp) {
                                cmp.setMinWidth(400);
                                cmp.setWidth(400);
                            }
                        }
                        return newV;
                    }
                }
            }

Dichroic