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

我有以下情况。我有一个Ext.form.field.File（buttonOnly: true在Ext.form.Panel之上，它位于工具栏的顶部，位于Ext.grid.Panel的一个工具栏上，结果是，该按钮的风格与工具栏完全不同，面板似乎有一些白色任何人都可以解决这个问题，所以按钮和面板的样式与工具栏相匹配（我使用默认样式，没有修改任何东西）。工具栏顶部的Ext.form.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],

来源

2012-12-05 Art F

我不知道“顶部”是足够清楚。如果您提供一些代码和屏幕截图，则您更有可能获得答案。这听起来很奇怪，所以我认为这只是一个错误配置，但解决方案可能需要一些css破解。 – Izhaki

也许我应该说“里面的”？不太确定如何正确使用它。 –

是的。 '里面'听起来好多了。 – Izhaki

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

0123。

你的问题是你正试图把一个面板放在工具栏中 - 它不会工作。

你最好只在你的页面上放置一个隐藏的上传表单;在工具栏中放置一个普通的按钮，然后使用工具栏按钮按下隐藏窗体上的按钮。

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

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-06 14:18:51 Izhaki

工作得很好。如果你有一个时刻你可以看看：http://stackoverflow.com/questions/13746671/how-to-get-an-extjs-application-to-look-like-the-feed-example –

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

回答

相关问题