[英]Ext.form.Panel on top of a Toolbar has some white space around it
I have the following situation. 我有以下情况。 I have an
Ext.form.field.File
(With the buttonOnly: true
on top of a Ext.form.Panel
which is on top of a Toolbar docked on an Ext.grid.Panel
. The result of that is, the button has a completely different style then the toolbar, and the Panel seems to have some white space around button that you can see. Anyone have any suggestions as to how I can fix this, so that the style of the button and panel matches the toolbar (I use default styles, didn't modify anything). 我有一个
Ext.form.field.File
(带有buttonOnly: true
在Ext.form.Panel
顶部的buttonOnly: true
,它位于停在Ext.grid.Panel
上的工具栏的顶部。其结果是,按钮具有与工具栏完全不同的样式,面板似乎在按钮周围有一些空白。任何人都对如何解决此问题有任何建议,以便按钮和面板的样式与工具栏匹配(我使用默认样式,未进行任何修改)。
EDIT: here is some code: 编辑:这是一些代码:
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],
You are using regions, but I cannot see any border
layout. 您正在使用区域,但看不到任何
border
布局。
Your problem is that you are trying to put a panel within a toolbar - it won't work. 您的问题是您试图将面板放入工具栏内-它将无法工作。
You better off just putting an hidden upload form somewhere in your page; 您最好将隐藏的上传表单放在页面的某个位置; putting a normal button in the toolbar, and have the toolbar button press triggering a press on the hidden form.
在工具栏上放置一个普通按钮,并按下工具栏上的按钮,触发在隐藏表单上的按下。
So this would be the hidden upload form definition: 因此,这将是隐藏的上传表单定义:
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: ''
}],
});
And then when the visible update button is pressed you can do: 然后,当按下可见的更新按钮时,您可以执行以下操作:
var uploadField = Ext.getCmp( 'uploadField' );
uploadField.fileInputEl.dom.click();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.