如何在extjs中调整filefield xtype按钮的大小？

问题描述

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

然而，虽然没有显示textfield，但它占据了空间，而且那个组件的宽度和按钮的宽度不一样。因此，当更多按钮应该在 hBox 布局中对齐时，它们不会正确拉伸 (Panel1)。

是否可以以某种方式仅显示 filefield 的按钮，使其看起来好像是一个“普通”按钮 (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',name: 'remove',text: 'Remove photo',}]
            },]
        });

        Ext.create('Ext.panel.Panel',title: 'Panel2',items: [{
                    xtype: 'button',text: 'Upload photo',]
        });

    }
});

解决方法

您可以使用“buttonConfig”属性：

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