如何在 extjs 中调整文件字段 xtype 的按钮大小？

Question

filefield xtype 属性隐藏文本字段并仅显示带有配置的按钮：buttonOnly: true。

然而，虽然没有显示文本框，但它占据了space，并且该组件的宽度与按钮的宽度不同。因此，当更多按钮应在 hbox 布局中对齐时，它们未正确拉伸 (Panel1)。

是否可以以某种方式仅显示 filefield 按钮，使其看起来像是 'normal' 按钮 (Panel2)？

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Panel1',
            items: [{
                xtype: 'container',
                padding: '10px 0 20px 0',
                layout: {
                    type: 'hbox',
                    align: 'middle',
                    pack: 'center'
                },
                defaults: {
                    margin: '0 5 0 0',
                    width: 150
                },
                items: [{
                    xtype: 'filefield',
                    name: 'upload',
                    buttonOnly: true,
                    buttonText: 'Upload photo',
                    flex: 1,
                }, {
                    xtype: 'button',
                    name: 'savephoto',
                    text: 'Save photo',
                    flex: 1,
                }, {
                    xtype: 'button',
                    name: 'remove',
                    text: 'Remove photo',
                    flex: 1,
                }]
            }, ]
        });

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Panel2',
            items: [{
                xtype: 'container',
                padding: '10px 0 20px 0',
                layout: {
                    type: 'hbox',
                    align: 'middle',
                    pack: 'center'
                },
                defaults: {
                    margin: '0 5 0 0',
                    width: 150
                },
                items: [{
                    xtype: 'button',
                    name: 'upload',
                    text: 'Upload photo',
                    flex: 1,
                }, {
                    xtype: 'button',
                    name: 'savephoto',
                    text: 'Save photo',
                    flex: 1,
                }, {
                    xtype: 'button',
                    name: 'remove',
                    text: 'Remove photo',
                    flex: 1,
                }]
            }, ]
        });

    }
});

Answer 1

您可以使用“buttonConfig”属性:

{
    xtype: 'filefield',
    name: 'upload',
    buttonOnly: true,
    buttonText: 'Upload photo',
    buttonConfig: {
        width: '100%'
    },
    flex: 1,
}

如何在 extjs 中调整文件字段 xtype 的按钮大小？

How to size button of filefield xtype in extjs?

extjs

button

filefield