ExtJS6 自适应浏览器窗口大小

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

posted @ 2016-11-10 20:15 赵轶东阅读(7339) 评论(1) 收藏举报

刷新页面返回顶部