ExtJS的窗口（Window）可以在网页中任意添加，由于其可以放大、缩小、移动，非常灵活，在使用过程中非常受欢迎。现新建一个Window.html网页，其内容如下：
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8; user-scalable=no">
<title>Window窗体</title>
<link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/>
<scripttype="text/javascript"src="bootstrap.js"></script>
<script type="text/javascript"src="Window.js"></script>
</head>
<body>
</body>
</html>
然后新建Window.js文件，添加如下代码：
Ext.onReady(function(){
var myWin = Ext.create('Ext.Window',{
title:'Window窗体', //窗体标题
closable:true, //可以关闭
width:600, //宽度
height:350, //高度
items:[] //包含的对象
});
myWin.show();//显示Window窗体
});
值得注意的是，最后一句show(this)非常关键，它将定义的Window窗体显示出来。其结果如下图所示：
如果要在这个定义的Window窗体中添加其他组件，如按钮、Panel等，则在它的items属性中添加，也可以直接通过add方法来添加。如下：
var myPanel = Ext.create('Ext.form.Panel', {
title:'My Panel',
width:200,
height:200,
autoScroll:true,
closable:true,
collapsible:true,
html:'你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛'
});
myWin.add(myPanel);
其结果如下图所示：
如果要添加多个Window窗体，则同样定义多个Ext.Window对象即可，如下：
var myWin2 = Ext.create('Ext.Window',{
title:'Window窗体2', //窗体标题
closable:true, //可以关闭
width:600, //宽度
height:350, //高度
plain:true,//背景透明
headerPosition:'right', //标题位置在右侧
items:[] //包含的对象
}).show();
其结果如下图所示：
此外，如果需要Window窗体显示最大化、最小化按钮，设置其minimizable属性和maximizable属性，如下：
minimizable:true, //可以最小化
maximizable:true, //可以最大化
其结果如下图所示：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
