ExtJS ComboBox 下拉寬度比輸入框寬度寬？

Question

有什么方法可以將 ExtJS（版本 4）ComboBox 的下拉菜單的寬度設置為比實際輸入框的寬度寬？

我有一個組合框，我想在 200px 左右，但我在結果下拉菜單上有分頁，寬度甚至不夠大，無法顯示所有分頁欄的控件。

這是我創建組合的代碼：

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

Answer 1

這有兩個部分。 首先，您需要在組合框配置中設置matchFieldWidth ：false。 然后，您可以在listConfig部分中指定width屬性以僅設置下拉列表的樣式，同時在主配置中指定組合框本身的寬度。

這與以前的版本不同，只允許您指定listWidth屬性。

Answer 2

我沒有找到動態更改'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;
       }
     }
   }
 }

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

Answer 3

在 ExtJS 7+ modern 中，如果你想控制組合框選擇器的寬度，你需要使用beforepickercreate事件。

它不是很直觀，但它確實有效。

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