ExtJS6 自適應瀏覽器窗口大小

時間 2019-11-08

原文原文鏈接

ExtJS6官方文檔推薦使用Ext.on。作一個小例子，建立一個Panel顯示在頁面上，使它的大小隨瀏覽器變化，自適應瀏覽器窗口大小。css

html：增長一個css樣式給Panel加上紅色border。html

<!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是全局變量。測試