Extjs的Window组件的简单实用实例
实例代码（简单的登录窗体）：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>窗体式登陆框</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var _loginWindow=new Ext.Window({
title:"登 陆",
frame:true,
layout:"form",
plain :true,//设置窗体颜色跟边框一色一直
resizable :false,//设置不允许用户拉动窗体的大小
minimizable :false,//设置窗体无最小换按钮
maximizable :false, //设置窗体无最大化按钮
closable:true,//设置窗体无关闭按钮（默认的是有关闭按钮）
border :true,//设置窗体有无边框(默认为有边框)
buttonAlign:"center", //设置窗体的按钮所在位置，默认为右对齐
// closeAction推荐使用hide值，而不要使用close，使用close会消耗很大的资源
closeAction :"hide", //设置关闭的事件，如果设置成为hide，则关闭的时候就只会出发hide事件，如果设置成为close，则会同时出发hide和close事件
width:280,
height:130,
labelWidth:50, //输入框前面label的宽度
shadowOffset :8, //投影偏移量
bodyStyle:"padding:5px", //设置窗体的样式
defaults:{xtype:"textfield",width:170},
items:[{fieldLabel:"用户名"},{fieldLabel:"密码"}],
buttons:[{text:"确 定"},{text:"取 消",handler:function(){
//调用窗体的隐藏函数
_loginWindow.hide();
}
}],
listeners:{
"show":function(){
alert("window is show!");
},
"hide":function(){
alert("window is hided!");
},
"close":function(){
alert("window is closed!");
}
}
});
_loginWindow.show(); //渲染窗体到界面
});
</script>
</head>
<body>Place your content here</body>
</html>
实例图片：