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. Oracle Function

    Oracle Sql 中常用函数 小写字母转大写字母:upper(); 大写字母转小写字母:lower(); 字符串截取函数:substr(str,a,b); a,b为整数,str为字符串, 截取字符 ...

  2. baiduMap

    1.把百度地图定位API(下载地址:http://lbsyun.baidu.com/sdk/download?selected=location),里面的lib福祉到自己的项目中 2,进行相关配置(官 ...

  3. presto-elasticsearch connector

    elasticsearch搜索功能强劲,就是查询语法复杂,presto提供了非常open的plugin机制,我改进了下原有的presto-elasticsearch connector,现发布于git ...

  4. Html中Table的简单使用

    虽然Table布局已经过时,偶尔还是会用到,简要实用代码,如下: <table border="1" cellpadding="0" cellspacin ...

  5. Mybatis缓存处理机制

    一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Se ...

  6. Java_Map_Map详解

    本博客为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/8867065 1.Map概述 Map<K,V>  Map集 ...

  7. Glide 魔法般的自定义扩展

    使用过Glide的朋友都明白,简单的用法就是: Glide.with(context) .load("http://inthecheesefactory.com/uploads/source ...

  8. 用户引导页--- ScrollView的使用

    一.首先第一步,写好用户轮播页的viewController,比如叫做LVUserGuideVC,关键代码是配置和scrollView和pageControl. (1)scrollView的设置 se ...

  9. Ubuntu 14.04 编译安装 boost 1.58

    简介 Boost is a set of libraries for the C++ programming language that provide support for tasks and s ...

  10. EntityFramework优缺点

    高层视图: 改变在现有系统使用EntityFramework的优势是什么? • All -in-1框架的类映射表,需要编写映射代码, 并且是很难维护的. • 可维护性,易于理解的代码,无需创造大的数据 ...