浏览器窗口变化实时获取window当前大小

主要步骤是两步：
1、获取屏幕尺寸和浏览器文本区域的尺寸
通过window的内置属性(innerwidth和innerheight)、document的内置对象(documentElement和body;对应的属性是clientwidth和clientheight)来获取
主要内容就是如下function：

   

//----chart尺寸默认值----
    var defaultwidth = "240px";
    var defaultheight = "100%";
    //----panel默认宽度----
    var panelwight = "100%";

    function _init_followSizeChange(){
        //获取显示器屏幕和浏览器inner内容大小
        var swidth = screen.width;
        var sheight = screen.height;
        //alert("显示器屏幕分辨率是:"+swidth+"X"+sheight);
        var wwidth = 0;
        var wheight = 0;
        if(document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight){
            wwidth = document.documentElement.clientWidth;
            wheight = document.documentElement.clientHeight;
        }else if(window.innerWidth && window.innerHeight){
            wwidth = window.innerWidth;
            wheight = window.innerHeight;
        }else if(document.body && document.body.clientWidth && document.body.clientHeight){
            wwidth = document.body.clientWidth;
            wheight = document.body.clientHeight;
        }
        //alert("浏览器当前文本区域大小是:"+wwidth+"X"+wheight);
        var width = (wwidth-550)/3;  //550是固定文本区域的宽度，要放置3个相同大小的chart，所以除3
        if(width >=240 ){   //如果宽度大于chart的默认宽度就均匀分布(百分比会自动适配大小)
            //defaultwidth = 100*width/wwidth+"%";
            defaultwidth="25%"
            panelwight = "100%";
        }else{          //否则就使用固定宽度来现实chart  效果就是通过滚动条来浏览全部 保证chart的数据分布的合理性与整体美观性
            defaultwidth = "240px";
            panelwight = "1000px";
        }
        //alert("每个chart的显示宽度："+defaultwidth+"  "+"panel宽度是"+panelwight);
    }

2、添加浏览器窗口变动事件的响应

  

 window.onresize = _windowonResize;   //浏览器窗口变动事件
    
    //浏览器窗口尺寸变化 就重新加载下面的内容
    function _windowonResize(){
        _init_followSizeChange(); //获取size
        _init_Panel9();   //再次初始化panel的size
        _init_Panel10();   
        _init_Panel5();
        _init_Panel6();
        _initdiv();  //再次初始化包含chart的div模块size
    }


    function _init_Panel5(){
        if(!_Panel5){
            _Panel5=new mx.containers.Panel({width:panelwight,height:"100px",title:"总览", id:"Panel5"});
            
            //_HSplit2Area0.addControl(_Panel5);
            _Container1.addControl(_Panel5);
        }else{
            _Panel5.resizeTo(panelwight,"100px");
        }        
    }
    
    function _init_Panel6(){
        if(!_Panel6){
            _Panel6=new mx.containers.Panel({width:panelwight,height:"70px",title:"容量视图", id:"Panel6"});
            //_HSplit2Area1.addControl(_Panel6);
            _Container1.addControl(_Panel6);
        }else{
            _Panel6.resizeTo(panelwight,"70px");
        }
    }

    function _init_Panel9(){
        if(!_Panel9){
            _Panel9=new mx.containers.Panel({width:panelwight,height:"270px",title:"资源视图",id:"Panel9"});
            //_HSplit3Area0.addControl(_Panel9);
            _Container1.addControl(_Panel9);
        }else{
            _Panel9.resizeTo(panelwight,"270px");
        }
    }
    
    function _init_Panel10(){
        if(!_Panel10){
            _Panel10=new mx.containers.Panel({width:panelwight,height:"280px",title:"应用视图",id:"Panel10",css:{"background-color":"#F0F0F0"}});
            
            //_HSplit3Area1.addControl(_Panel10);
            _Container1.addControl(_Panel10);
        }else{
            _Panel10.resizeTo(panelwight,"280px");
        }
    }

    function _initdiv() {
        if (!divfixinfochart) {    //如果此div不存在就初始化一个
            divfixinfochart = new mx.containers.Container({
                        id : "divfixinfochart",
                        width : defaultwidth,
                        height : defaultheight
                    });
            _Panel9.addControl(divfixinfochart);
        }else{                     //如果存在就不能在初始化了  那样会出现同id的两个div在页面上  通过resizeTo重置chart的宽高
            divfixinfochart.resizeTo(defaultwidth, defaultheight);
        }
        if (!divcountchart) {
            divcountchart = new mx.containers.Container({
                        id : "divcountchart",
                        width : defaultwidth,
                        height : defaultheight
                    });
            _Panel9.addControl(divcountchart);
        }else{
            divcountchart.resizeTo(defaultwidth, defaultheight);
        }
        if (!divx86chart) {
            divx86chart = new mx.containers.Container({
                        id : "divx86chart",
                        width : defaultwidth,
                        height : defaultheight
                    });
            _Panel9.addControl(divx86chart);
        }else{
            divx86chart.resizeTo(defaultwidth, defaultheight) ;
        }
        if (!divfuwutongji) {
            divfuwutongji = new mx.containers.Container({
                        id : "divfuwutongji",
                        width : defaultwidth,
                        height : defaultheight
                    });
            _Panel10.addControl(divfuwutongji);
        }else{
            divfuwutongji.resizeTo(defaultwidth, defaultheight) ;
        }
        if (!divjisuantongji) {
            divjisuantongji = new mx.containers.Container({
                        id : "divjisuantongji",
                        width : defaultwidth,
                        height : defaultheight
                    });
            _Panel10.addControl(divjisuantongji);
        }else{
            divjisuantongji.resizeTo(defaultwidth, defaultheight) ;
        }
        if (!divziyuantongji) {
            divziyuantongji = new mx.containers.Container({
                        id : "divziyuantongji",
                        width : defaultwidth,
                        height : defaultheight
                    });
            _Panel10.addControl(divziyuantongji);
        }
        else{
            divziyuantongji.resizeTo(defaultwidth, defaultheight) ;
        }
    }