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. 最难面试的IT公司之ThoughtWorks代码挑战——FizzBuzzWhizz游戏(C#解法)

    原题 看到那么多人看到前面这么糟粕的代码各种不忍直视后,楼主还是把最终实现放在页首吧.             Console.WriteLine("说出三个不同的特殊数,用','隔开 &q ...

  2. Objective的字符串拼接 似乎没有Swift方便,但也可以制做一些较为方便的写法

    NSString *str1 = @"字符串1"; NSString *str2 = @"字符串2"; //在同样条件下,Objective的字符串拼接 往往只 ...

  3. SVN中trunk、branches、tag的使用

     我相信初学开发在SVN作为版本管理时,都估计没可能考虑到如何灵活的运用SVN来管理开发代码的版本,下面我就摘录一篇文章来简单说明SVN里的trunk,branched,tags这个三个文件目录的用法 ...

  4. vert.x学习（一），开篇之hello world

    今天决定学习下vert.x这个框架,记录下学习笔记. 下面列下我的开发环境: Java版本 1.8 maven版本 3.3 IDEA版本 2016 在idea中使用vert.x不用下载或安装其他东西了 ...

  5. Angular-表单动态添加删除

    angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成.所以说,想清楚问题的根源,解决起来也不是那么困难. 前提 那么,要做的这个添 ...

  6. ORM系列之二：EF(3) 数据库连接

    目录 1.前言 2.Code First默认连接 3.Code First指定数据库 4.自定义连接 前言 在介绍EF的Code First模式时候,我们没有修改任何配置,运行之后自动在LocalDb ...

  7. h5网站和好看的动画网址

    http://www.sucai888.com/data/batchzip/unzips/2165/index.html http://www.1000zhu.com

  8. Oracle数据库导入、导出dmp文件

    oracle导出数据: 1.该处的导出数据需要在dos命令行下执行,进入到oracle客户端路径下执行(该处也可为oracle客户端路径配置系统变量),如: E:\oraclexe\app\oracl ...

  9. Python学习【第三篇】Python变量

    变量 声明变量 #!/usr/bin/env python name = "Bourbon" 上述代码声明了一个变量,变量名为:name,变量的值为:"Bourbon&q ...

  10. Oracle之nclob类型

    此类型会严重影响查询效率,请少用: nclob字段在查询结果中显示为<NCLOB>,查看nclob类型的值方法有两种 a.可点开...查看具体数据 b.选择所有数据,右击复制到Excel, ...