ExtJS ComboBox下拉宽度比输入框宽度宽？ [英] ExtJS ComboBox dropdown width wider than input box width?

问题描述

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

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?

我有一个comboxbox，我想要在大约200px，但我有分页在结果下拉列表，这个宽度甚至不足以显示所有的分页栏的控件。

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

推荐答案

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

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.

这从不同的版本，这只是让你指定listWidth属性。

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

这篇关于ExtJS ComboBox下拉宽度比输入框宽度宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！