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