0

我有以下情况。我有一个Ext.form.field.File( 在buttonOnly: truea 的顶部，Ext.form.Panel它位于停靠在 . 上的 Toolbar 的顶部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],
4

1 回答 1

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();
于 2012-12-06T14:18:51.750 回答