ExtJS6官方文档推荐使用Ext.on。做一个小例子，创建一个Panel显示在页面上，使它的大小随浏览器变化，自适应浏览器窗口大小。

html：增加一个css样式给Panel加上红色border。

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>ExtOnResize测试</title>

  <meta charset="utf-8" />

  <link rel = "stylesheet" type = "text/css" href = "/ExtJS60/classic/theme-classic/resources/theme-classic-all.css" />

  <style type="text/css">

    .PanelCls

    {

      border: solid 1px red;

      padding: 8px;

    }

  </style>

  <script src="/ExtJS60/ext-all.js"></script>

  <script src="/ExtJS60/classic/locale/locale-zh_CN.js"></script>

  <script src="/Scripts/ExtOnResize_client.js"></script>

</head>

<body>

</body>

</html>

ExtOnResize_client.js

var mMainPanel;

Ext.onReady(function ()

{

  //Ext.Msg.alert("Ready", "\\ElectricStation\\ExtJSMVC2016\\Scripts\\ExtOnResize_client.js<br/>ExtJS就绪");

  mMainPanel = Ext.create('Ext.panel.Panel', {

    renderTo: Ext.getBody(),

    //bodyCls:'PanelCls',

    cls: 'PanelCls',

    height: window.innerHeight,

    width: window.innerWidth

  });

  Ext.on('resize', function (width, height)

  {

    mMainPanel.setWidth(width);

    mMainPanel.setHeight(height);

  });

});

mMainPanel是全局变量。

ExtJS6 自适应浏览器窗口大小的更多相关文章

  1. JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    iframe宽高度自适应浏览器窗口大小的解决方法   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...

  2. Echarts同一页面多个图表自适应浏览器窗口大小——window.onresize

    当前做的一个项目中,频繁使用到百度团队的Echarts,发在一个页面同时出现多个图表时,只有最后一个图表触发了window.onresize事件,查询官方文档后得到解决. 方法如下: hwChart. ...

  3. vue Echarts自适应浏览器窗口大小

    <template> <div class="chinaecharts"> <div id="mapChart" ref=&quo ...

  4. easyui panel自适应浏览器宽度

    一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...

  5. JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  6. JS获取各种浏览器窗口大小的方法

    常用:JS 获取浏览器窗口大小复制代码 代码如下:// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((docum ...

  7. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  8. Javascript获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  9. Unity3d webplayer发布的问题和100%自适应浏览器

    Unity3d发布的问题 发布的时候,遇到无法写入Resources.assets,原来是我的项目中有多个Resources文件夹,以后最好是不要有重复的文件夹和一样名字的资源! 还有就是发布的web ...

随机推荐

  1. Java的算数运算符、关系运算符、逻辑运算符、位运算符

    JAVA的运算符,分为四类: 算数运算符.关系运算符.逻辑运算符.位运算符 算数运算符(9):+  -  *  /  %  ++  -- 关系运算符(6):==  !=  >  >=  & ...

  2. *HDU2852 树状数组(求第K小的数)

    KiKi's K-Number Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  3. hibernate 异常:Unexpected Exception caught setting

    异常信息:Unexpected Exception caught setting 'outHeight' on 'class com.srpm.core.project.seismicFortific ...

  4. 【emWin】例程三：显示方向的切换

    实验指导书及代码包下载: http://pan.baidu.com/s/1pK9o0xP

  5. hihoCoder 1393 网络流三·二分图多重匹配（Dinic求二分图最大多重匹配）

    #1393 : 网络流三·二分图多重匹配 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 学校的秋季运动会即将开始,为了决定参赛人员,各个班又开始忙碌起来. 小Hi和小H ...

  6. Air 压力测试

    VersionCode:{311} VersionName:{3.1.1} Force:{yes} Supply:{no} ToolsBlack:{yes}

  7. kafka模块概述

    简介 kafka主要用于实现低延迟的发送和收集大量的事件和日志数据--通常是活跃的数据(PV.访问记录等),数据以日志形式记录下来,然后由一个专门的系统来进行日志的收集与统计: 吞吐量极高的分布式消息 ...

  8. 掌握Thinkphp3.2.0----标签库

    1.什么是内置标签?什么是标签扩展库? Cx.class.php 和 Html.class.php 2.怎么加载非内置标签,怎么使用? 两种方式加载 3.怎么扩展自定义的标签? 仿照Html.clas ...

  9. java常见面试题及答案 11-20（JVM篇）

    11.JVM内存分哪几个区,每个区的作用是什么? Java虚拟机主要分为以下一个区: 方法区:1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区 ...

  10. django-- Models

    数据库配置 django默认支持sqlite,MySQL,Oracle,postgresql数据库 如何将数据库设置为MySQL 将setting中的database修改: DATABASES = { ...