sencha-touch-2 - 更改 sencha 中的选择字段宽度

Question

我有下一个代码：

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'Select',
            items: [
                {
                    xtype: 'selectfield',
                    label: 'Choose one',
                    options: [
                        {text: 'First Option',  value: 'first'},
                        {text: 'Second Option', value: 'second'},
                        {text: 'This is a long text to test the selectfield',  value: 'third'}
                    ]
                }
            ]
        }
    ]
});

我想更改选择字段的宽度，因为第三个选项很长。

Answer 1

有宽度和最大宽度配置。

编辑：

div.x-select-overlay { width: 15em !important }

Answer 2

上述结果将覆盖整个应用程序中的选择字段覆盖。

为了更精确和准确，您可以使用选择字段defaultPhonePickerConfig或defaultTabletPickerConfig在您的特定 selectfield.eg 中覆盖宽度或高度属性。

{
    xtype: 'selectfield',
    defaultPhonePickerConfig: {
        height: '8em',
        width:'10em'
    },
    defaultTabletPickerConfig: {
        height: '8em',
        width:'10em'
    },
}

Answer 3

我终于解决了这个问题：

.x-select-overlay{
min-width: 25em !important;
} 

在 app.scss