工具栏顶部的Ext.form.Panel周围有一些空白

Question

我有以下情况。 我有一个Ext.form.field.File （带有buttonOnly: true在Ext.form.Panel顶部的buttonOnly: true ，它位于停在Ext.grid.Panel上的工具栏的顶部。其结果是，按钮具有与工具栏完全不同的样式，面板似乎在按钮周围有一些空白。任何人都对如何解决此问题有任何建议，以便按钮和面板的样式与工具栏匹配（我使用默认样式，未进行任何修改）。

编辑：这是一些代码：

upload_button = Ext.create('Ext.form.field.File', {
            buttonOnly: true,
            buttonText: "Upload File",
            hideLabel: true,
            listeners: {..}

        });

        button_panel = Ext.create('Ext.form.Panel', {
            region: 'south',
            items: upload_button
        });


  upload_toolbar = Ext.create('Ext.toolbar.Toolbar',{
            width: 400,
            region: 'north',
            dock: 'top',
            items: [ button_panel]});

grid_file = Ext.create('Ext.grid.Panel', {
            title: 'File List',
            region: 'center',
            height: 300,
            store: store_file,
            dockedItems: [upload_toolbar],

Answer 1

您正在使用区域，但看不到任何border布局。

您的问题是您试图将面板放入工具栏内-它将无法工作。

您最好将隐藏的上传表单放在页面的某个位置； 在工具栏上放置一个普通按钮，并按下工具栏上的按钮，触发在隐藏表单上的按下。

因此，这将是隐藏的上传表单定义：

Ext.define('App.view.Assignments' ,
{
    extend: 'Ext.panel.Panel',
    alias: 'widget.assignments-panel',

    hidden: true,

    items: [{
        xtype: 'filefield',
        id: 'uploadField',
        emptyText: 'Select a file',
        fieldLabel: 'Assignment',
        name: 'assignment-path',
        buttonText: '...',
        buttonConfig: {
            iconCls: 'upload-icon'
        }
    },{
        xtype: 'hidden',
        id:    'submissionIdField',
        name:  'submissionId',
        value: ''
    }],
});

然后，当按下可见的更新按钮时，您可以执行以下操作：

var uploadField = Ext.getCmp( 'uploadField' );
uploadField.fileInputEl.dom.click();