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，我想要大约 200 像素，但我在结果下拉菜单上有分页，而且宽度甚至不够大，无法显示所有分页栏的控件.

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屋！