ExtJS下的布局BUG
这个BUG不知道别人遇到过没,反正写Java的同事总跟我说没有问题,但我这里就是不正确,框架提供给别人也一样不正确
其实很简单,就是ViewPort布局后,主区域采用了Card模式(而不是Tab模式),每个Card都是一个Panel
而在主区域的Panel里再进行布局使用到了FormPanel时,就遇到了问题:
例如:一个查询页面,上面是个FormPanel,用来排放搜索条件控件(这样可以通过form.getValues方法获取参数值,而不需要自己写方法去一个一个控件读了),下方是个放置了Grid的普通Panel
或者是一个详细信息页面,上方是一个放置详细信息的FormPanel(这样可以使用封装的代码直接调Form.load来装载数据),下方是其它的附加信息
在遇到这种情况时,FormPanel如果再使用了Column布局,就出问题了,整个Panel内所有内容均缩到了大约60%的区域内,所有的控件都变短了(就好像Panel本身设置成了60%宽度一样,但无论怎么修改,都不能设置成正常的100%宽度)
而且很奇怪的是,第一个装载进来直接显示的Panel是没有问题的,但一切换当前的Card成其它Panel,显示就有问题
这个问题尝试修正了很多天,一开始同事说是布局错误,可怎么都修正不过来
后来同事提供了一个Card的Panel使用layout border模式的布局改进,到是可以显示正常了,问题是这种布局一个页面只支持3个位置(North,South,Center),也就是说,如果页面要显示的信息多了就不行
当时框架开发就卡这了,因为怎么布局都不正常
后来无意间把Column模式里的.columnWidth属性改成了.width属性,居然发现这样写布局恢复正常了
写法:
.columnWidth: .33, ----> .width: '33%',
不过还是有问题,在使用.columnWidth的情况下,里面的控件的长度如果设置成 defaults: { anchor: '93%' }这样的样式,都是正常的
而使用.width时,下拉框、时间选择框等控件又出问题了,他们的长度只显示60%左右......也就是页面里看起来有部分控件长,部分控件短......
而如果强行使用设置所有控件的长度的像素,到是可以基本保持所有控件看起来差不多长(下拉框和时间选择框等还是比输入框长了一个下拉按钮的长度),但是就无法自适应页面变换了
这个问题就真的没办法了,最后只能凑合着用用了......