ExtJS6 自适应浏览器窗口大小

最新推荐文章于 2020-11-21 18:34:41 发布

转载最新推荐文章于 2020-11-21 18:34:41 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/edong/p/6052270.html

本文介绍如何使用ExtJS6实现面板自适应浏览器窗口大小的功能。通过Ext.on监听浏览器的resize事件，动态调整Panel的宽度和高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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是全局变量。