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. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  2. Git系列教程一 入门与简介

    一.版本控制引入 可能我们都会有这样的经历:创建了一个文件,并对它做了多次更改,当我们想回到其中的某一次更改的时候,由于时间太长记不得那次更改的内容,于是我们在每次大的更改的时候,会创建一个文件的副本 ...

  3. 准备上线,切换到master分支,报错

    切换到master分支,准备上线,把上次上线sourceTree保存的修改拉出来: 运行,报错了: stackOverflow一搜说要删除旧的: 我show in finder 把他删了,然后双击安装 ...

  4. ECMAScript Web APIs node.js

    https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ What falls under the scope of ECMASc ...

  5. Swift 语法篇

    一.输出语句 print("Hello World") print("Hello World 11", "Hello World 22", ...

  6. redis3.2新增属性protected mode

    在安装新版redis时(3.2) , 一直出现问题 , 只能本机连接其他机器访问失败 , 后来发现是新版增加了安全机制 在配置文件里可以发现多出了protected-mode这一项 , 如果为yes ...

  7. Glide请求图片能携带Cookie的哟！

    在Web编程中我们都很熟知一个概念,当有了seesion登录状态时,你可以访问一些资源但如果你没有登录的话很多资源是无法访问的. 在android的WebApi中当然一样拥有这个概念.比如,用户的头像 ...

  8. google play iap 常见问题

    1.测试阶段query时获取的sku对象为空 解:测试阶段只能使用如下sku // private static final String SKU_TEST = "android.test. ...

  9. 通过href简单实现单击a链接跳转到页面指定位置

    在页面中点击a标签后,要使其跳到页面里面相应的地方,方法很简单,就是在a标签里面href中的内容和你要跳到这个区域的id同名即可,例如: <a href="#ppp" tar ...

  10. 两个有意思的模式在ECMAScript中的实现

    简介 本篇文章对设计模式进行了筛选, 只列举两个有意思(坑)的设计实现, 如有错误愿闻其详. 构造函数 ECMAScript中的构造函数和其他语言的有那么点特别之处,可以认为, 一个函数, 如果被以n ...