ExtJS ComboBox下拉宽度比输入框宽度宽?

Bil*_*ami 20 javascript user-interface combobox extjs extjs4

有没有办法将ExtJS(版本4)ComboBox的下拉菜单的宽度设置为宽于实际输入框的宽度?

我有一个comboxbox,我希望大约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
    });
Run Code Online (Sandbox Code Playgroud)

Sim*_*all 36

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

这与以前的版本不同,只允许您指定listWidth属性.

  • 我希望列表宽度自动调整为组合商店中最长条目的宽度.这在我使用width:'auto'时有效,但是当条目更短时,列表也比组合框更窄.有没有什么方法可以将列表的minWidth设置为其父级的宽度,并且只有在条目更长的情况下才能使auto工作? (2认同)

小智 5

我没有找到动态更改'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;
       }
     }
   }
 }
Run Code Online (Sandbox Code Playgroud)

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