loginWindow.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆窗口</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../EXTJS/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
var _window = new Ext.Window({
title:"登 陆", //标题
frame:true, //样式,边为圆角
width:260, //宽度
height:130, //高度
layout:"form", //布局
labelWidth:45, //标签宽度
//True 表示为显示 'close' 的工具按钮可让用户关闭window, false表示为隐藏按钮,并不允许关闭window(默认为 true).
// closable:false,
//重定义关闭操作动作,原关闭会执行hide close两个操作
closeAction:"hide",
//True 表示为强制渲染窗的背景为透明的背景(默认为 false)
plain:true,
//True 表示为允许用户从窗口的四边和四角改变window的大小(默认为 true).
resizable:false,
//制定body元素的CSS样式,padding:5px意思为组件与顶部和左边都间距5PX
bodyStyle:"padding:5px",
//指定items数组的默认属性
defaults:{xtype:"textfield" , width:180},
//事件对列,用数组表示,键为事件名,值为订阅事件函数
listeners:{
"show":function(){
alert("显现窗口");
},
//hide事件为隐藏窗口
"hide":function(){
alert("隐藏窗口");
},
//close事件为在DOM树中删除窗口
"close":function(){
alert("关闭窗口");
}
},
//指定包含面板中的组件的配置数组
items:[{
fieldLabel:"账号"
},{
fieldLabel:"密码"
}],
//在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center' (默认为 'right').
buttonAlign:"center",
//指定包含面板中的按纽的配置数组
buttons:[{
text:"确 定"
},{
text:"取 消",
//给按钮添加一个事件,handle为默认事件,按钮的默认事件为click
handler:function(){
_window.hide();
}
}]
});
/*
window对象需要Show方法来运行(使得窗口显现)
panel使用render方法或使用renderTo这个属性运行
*/
_window.show();
});
</script>
</head>
<body>
</body>
</html>
主要是JS代码,所以我用的CODE为JS,大部份都写了注释,不多说主要说一点
每个窗口都有自己关闭按钮,他默认的操作
先HIDE,后COLSE
hide为隐藏窗口,close为在DOM删除窗口,同时也会注销窗口的EXT对象,但close所做的操作是页面程序一直消耗非常高的动作,所以要尽量避免
可以通过closeAction属性来修改关闭按钮的动作,如代码上面写的
学习资料来源于DOJOCHINA的EXT视频,非常感谢
网址:http://www.dojochina.com/index.php?q=node/889
分享到：
相关推荐
#### 二、Window对象的作用 `Window`对象在JavaScript中扮演着多重角色： - **全局命名空间**：所有的全局变量和函数都定义在这个对象上。 - **文档容器**：`Window`对象可以访问当前窗口中的文档对象（`document`...
Window对象在JavaScript中是浏览器全局对象，它代表了浏览器的一个窗口或者一个框架。在这个窗口中，我们可以执行脚本、操作DOM、以及处理用户与页面的交互。Event对象则是JavaScript事件处理中的核心，它包含了与...
JavaScript中的WINDOW对象是JavaScript在浏览器环境中访问和操作浏览器窗口的核心对象。它包含了与浏览器窗口相关的所有属性和方法，使得开发者能够实现对窗口的各种控制，如打开新的窗口、更改窗口尺寸、滚动内容...
document对象和window对象是JavaScript中最为重要的内置对象，它们是网页交互的核心。document对象代表了整个HTML文档，而window对象则代表了浏览器窗口本身。理解这两个对象可以帮助开发者实现动态网页内容的更新、...
【window对象】是JavaScript中的全局对象，它代表了浏览器的窗口。在JavaScript中，所有的全局变量和函数都是window对象的属性和方法。本篇将详细阐述window对象的一些常用方法及其作用。 1. **open方法** `window...
JavaScript中的Window对象是全局对象，它是每个浏览器窗口的核心，提供了许多与浏览器窗口交互的方法和属性。这个对象在JavaScript中无处不在，因为它既是全局变量也是全局函数的容器。以下是Window对象的一些主要...
window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window...
JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 ...
Window对象在Web开发中扮演着至关重要的角色，它是JavaScript中全局对象的一个实例，几乎所有的其他JavaScript对象都是Window对象的后代。了解并熟练掌握Window对象的方法和属性，可以帮助开发者编写出性能更高、更...
Window对象 思维导图; 可以用MindManager 、XMind 、百度脑图打开；在这个的基础上面添加自己的理解，整理成自己的个人知识体系
Excel窗口_Window对象_基本操作应用示例.pdf
### JavaScript中的Window对象详解 #### 一、概述 在JavaScript中，`Window`对象是所有浏览器操作的基础。它是全局对象，也是顶级对象。通常我们提到的`window`就是指当前浏览器窗口。`Window`对象拥有许多属性和...
java视屏\6.WEBBASIC\5.常用内置对象-下 、 外部对象概述 、 window对象.mp4
同时，`window`对象是浏览器环境中全局作用域的基础，它代表了整个浏览器窗口。这篇博文可能深入探讨了这两者在实际应用中的结合与互动。 函数在JavaScript中扮演着多面手的角色。它们不仅可以执行特定任务，还可以...
"js_Window对象及方法" window 对象是客户端 JavaScript 最高层对象之一，只要打开浏览器窗口，不管该窗口中是否有打开的网页，当遇到 BODY、FRAMESET 或 FRAME 元素时，都会自动建立 window 对象的实例。另外，该...
根据提供的文件信息，这是一篇关于JavaScript中的window对象及其方法的文档。window对象是Web浏览器中的一个全局对象，它代表了浏览器窗口本身，是JavaScript中的最顶级对象。以下是关于window对象及其相关方法的...
JavaScript中的Window对象是浏览器环境中最基础且至关重要的对象，它代表了浏览器的窗口，并提供了与用户交互、控制文档以及访问浏览器特性的接口。在本文中，我们将深入探讨Window对象的各种属性、方法和事件，以便...
JS 中的 document 对象和 window 对象 在 JavaScript 中，document 对象和 window 对象是两个非常重要的对象，它们都是 Window 对象的属性，用于描述当前显示的文档和浏览器窗口。 document 对象 document 对象是...
### JavaScript的document和window对象详解 #### Document对象 在JavaScript中，`document`对象是`window`和`frames`对象的一个属性，它表示显示在窗口或框架内的HTML文档。通过这个对象，开发者能够访问和操作...