Javascript ExtJS ComboBox 下拉宽度比输入框宽度宽？

ExtJS ComboBox dropdown width wider than input box width?

提问by Bill Dami

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?

有没有办法将 ExtJS（版本 4）ComboBox 的下拉菜单的宽度设置为比实际输入框的宽度宽？

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.

我有一个 comboxbox，我想要大约 200 像素，但我在结果下拉列表中进行了分页，而且该宽度甚至不足以显示所有分页栏的控件。

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
    });

回答by Simon Elliston Ball

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 listConfigsection to style just the dropdown, while specifying the width of the combobox itself in the main config.

这有两个部分。首先，您需要在组合框配置中设置matchFieldWidth: false 。然后，您可以在listConfig部分中指定宽度属性以仅设置下拉列表的样式，同时在主配置中指定组合框本身的宽度。

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

这与之前的版本不同，它只是让您指定 listWidth 属性。

回答by Alex Dzeiko

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

我没有找到动态更改“matchFieldWidth”属性的方法。所以我找到了另一个解决方案：

 {
   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

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