ExtJs 5 build之后body高度为零的问题。

用Sencha创建的项目,创建开发时获取的body.height为浏览器可见大小。 后来sencha app build之后,Ext.getBody().getHeight()的大小变成0了。 后来发现body元素的宽度默认是浏览器宽度,高度为0,要让它高度适应浏览器要在html和body的Css加上height:100%;。为了看看原来的CSS,创建了一个新的ExtJs项目,发现html和body元素都有viewport的CSS (.x-viewport,.x-viewport > .x-body),

 

build之后就消失了,查找CSS源码发现上方有一行注释:/* line 2, ../../../ext-theme-base/sass/src/container/Viewport.scss */ 。看起来与Ext.container.Viewport有关,然后在控件的requests配置项里加了”Ext.container.Viewport“,重新生成项目问题解决,在build中发布的版本里的css文本添加了丢失的css,不过也会增加了container.Viewport的js源码,增大了js的体积。 原来CSS也是按需创建的,开发时项目里没用到的控件CSS也起了作用。不知道这个算不算ExtJS的一个Bug。 还有一个方法是用自己的CSS改变html和body的高,在app.json里添加你的css文件路径即可荐。

发表评论