实例代码（简单的登录窗体）：
<%@ 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>
实例图片：
