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, //可以最大化
其结果如下图所示: