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. wifi 破解

      基础的知识: ESSID :无线网络的名字 BSSID  :是AP的mac地址 CH: 工作信道 AP   :无线访问接入点 WEP WPA/WPA2 STATION   :客户机mac DHCP ...

  2. Java 开发环境的搭建

      配置JDK安装路径 1——JAVA_HOME 2——CLASSPATH               配置类库文件位置(特别注意:路径前面的”. “ 代表当前路径,分号用来区分路径) 3——PATH ...

  3. 20145205 《Java程序设计》第8周学习总结

    教材学习内容总结 第十五章 通用API 15.1 日志 日志API简介 java.util.logging包提供了日志功能相关类与接口,不必额外配置日志组件,就可在标准Java平台使用是其好处.使用日 ...

  4. jQuery简单易用的网页内容打印插件

    简要教程 jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定区域的网页元素,可以指定跳过不打印某些元素,还可以打印整个页面内容.并且提供了丰富的 ...

  5. redisTemplate的spring配置以及lua脚本驱动

    最近在使用spring-data-redis的redisTemplate,所以写篇使用记录吧. 1.不用多说,使用maven引入相关依赖,因为项目已经引入其他的 <dependency> ...

  6. 好程序与差程序Good Programming, Bad Programming

    好程序与差程序 Good Programming, Bad Programming 发布时间: 2012-11-20 16:32:21| 阅读数:2,735 views 优秀的程序可以使复杂的东西看起 ...

  7. NotePad++左侧导航

    NotePad++ 1.  增加左侧导航 a. 通过工具栏里面的“插件”->Plugin Manager-> Shwo Plugin Manager b. 找到Explorer勾选,点击I ...

  8. Thinking in Java——笔记(13)

    Strings Immutable Strings Objects of the String class are immutable. Every method in the class that ...

  9. mysql实现分组和组内序号

    SELECT CASE WHEN @mid = t.PAY_TIME THEN ELSE END SEQ, @mid := t.PAY_TIME, t.AMOUNTS, t.CHARGE_PRICE, ...

  10. crontab执行时间和系统时间不一致

    最近发现一个非常奇怪的问题,症状如下: crontab 定时任务 配置时间 是 10 5 * * * (每日凌晨5点10分执行) 运行脚本时间却是 18:10左右 Dec 24 05:10:01 ht ...