Ext的高度宽度设置

Ext里对于浏览器高度宽度的自适应设置，

 Ext.Viewport 里的 常常使用  renderTo: Ext.getBody()

这个时候 需要对高度宽度的设置

 

一般来说定义全局变量

var height = $(window).height(), width = $(window).width();

纯js:
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

 

这个就是当前浏览器的高度，宽度。

在Viewport 里使用：

new Ext.Viewport({
        height: height,
        width: width,
        layout: {
             type: 'vbox',
             align : 'stretch',
             pack  : 'start',
        },
        renderTo: Ext.getBody(),
        items: [queryForm, gird]
    });

 

如果当前页面的排版为 上下两部分，上面查询条件，下面gird，这个时候 就可以将上面的panel设定指定高度例如

width : '100%',
height : 120,

然后再下方gird里设置的高度宽度为：

width : '100%',

height : height-120,

$(window).resize(function () {
                        $('.xxx').height($(this).height()- 70);
 });