ExtJS ComboBox dropdown width wider than input box width?

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'
            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

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.

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

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

Read More:   d3.js and document.onReady

It’s not very intuitive, but it works.

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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts