ExtJS6 自适应浏览器窗口大小

本文介绍如何使用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是全局变量。

录像9

转载于:https://www.cnblogs.com/edong/p/6052270.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值