Question

我有以下情况。我有一个Ext.form.field.File（buttonOnly: true位于Ext.form.Panel顶部，位于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();

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

1 个答案: