最近在做一个文件批量上传的功能,用的是EXT中的上传组件:Ext.ux.UploadDialog (for Ext 2.0) 。代码倒是比较简单,因为是成熟的组件,直接调用就行,之前在EXT3.0中测试的时候很正常,但是,到了实际工作的 EXT2.0 中问题就来了,上传对话框弹出之后,下面的工具栏不显示了,如下图:

Ext.ux.UploadDialog 中底部工具条BottomToolbar 不显示的问题_系统运维

经过一些测试,发现工具栏其实已经加载了,并且,仔细观察的话,用鼠标放在底部的位置,也是能看到工具栏按钮的,只不过被遮住了绝大部分。

这种效果当然是不行的。经过了各种各样的尝试、各种各样的百度和谷歌,甚至尝试了修改Ext.ux.UploadDialog.js 这个源文件,无奈水平有限,工具栏还是出不来。

后来,联想到了工具栏本身的高度(Height)问题,于是在Ext.ux.UploadDialog.js 中修改了一下GridPanel的初始化方法,内容如下:


Ext.ux.UploadDialog 中底部工具条BottomToolbar 不显示的问题_系统运维_02


注意 bbar 这个配置项,new Ext.Toolbar()里面采用了默认配置,修改一下 bbar 的配置,增加一个指定的高度(经测试,47比较合适),如下图:


Ext.ux.UploadDialog 中底部工具条BottomToolbar 不显示的问题_系统运维_03

修改完之后,工具栏就显示出来了~,如下图:

Ext.ux.UploadDialog 中底部工具条BottomToolbar 不显示的问题_系统运维_04


为了这个问题整整折腾了一天半。。。。

关于这个EXT的底部工具栏,总结一下:

Ext.window 有 bbar 这个配置项,Ext.grid.GridPanel 也有bbar 这个配置项,如果把 bbar 放在 window 中,情况比较简单,一般不会有问题。而如果把 bbar 放在GridPanel中,然后再把GridPanel放在window中,就可能出现上述的问题。

另外,在EXT3.0和EXT2.0中,工具条也有一些差异,在3.0中应该是改进过的,在声明了 var tb = new Ext.Toolbar()之后,就直接能用 tb.add()方法往工具条中加元素了。

而2.0中如果直接用add()方法就会报错,提示“this.tr 为空或不为对象”,而要在工具条的父容器加载之后,调用父容器的 getBottomToolbar() 方法取得工具条,然后才能用add()方法。