实例代码（简单的登录窗体）：
<%@ 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>
实例图片：
分享到：
相关推荐
首先，理解ExtJS中的Window组件。Window是浮动的、可拖动的容器，通常用于显示临时信息或进行独立的操作。创建一个窗口，你需要定义一个配置对象，包括窗口的基本属性，如宽度、高度、标题等。例如： ```javascript...
在开发实例部分，可能会涵盖EXTJS的各种组件如窗口（Window）、面板（Panel）、表单（Form）、表格（Grid）、树形控件（Tree）的使用方法，以及如何创建动态数据绑定、实现数据分页、使用Ajax进行异步通信等。...
在EXTJS中，Window组件并不直接支持最小化功能，但可以通过自定义事件监听和处理来实现这一功能。描述中的"实现最下化功能"实际上是指让Window组件可以像操作系统中的窗口那样被最小化到任务栏或某个特定区域。 要...
文件"ExtJS 实用简明教程.pdf"很可能是这个中文教程的一部分，或者是一个独立的简明指南，它可能包含了一些关键概念的快速入门、重要组件的使用方法，以及一些实用技巧。PDF格式使得你可以离线阅读，方便随时查阅。 ...
容器通过items属性配置其子组件，可以是已创建的组件实例，也可以是通过xtype指定类型延迟实例化的组件。例如，`Ext.container.Viewport`常作为顶级容器，用于包裹整个应用程序界面。在示例中，两个Panel组件被添加...
本话题主要关注如何在EXTJS3的Window组件中实现一个功能：当用户在窗口内修改了数据后，关闭窗口时提示用户是否保存更改。未进行修改的情况下，窗口可以直接关闭，不显示任何提示。 首先，我们需要创建一个基本的...
EXTJS的组件如Grid Panel可以用于显示表格数据，Form Panel用于数据录入，Window和Dialog用于弹出式操作，Tree Panel可以用于展现层次结构的数据。 文件名称列表中的"ASE"可能是项目文件的缩写，但具体含义需要查看...
行选择模型和Grid视图都是表格组件中的重要组成部分，掌握它们的使用方法可以极大地提升表格的实用性。 - **行选择模型**: 介绍了几种不同的行选择模型及其应用场景。 - **Grid视图**: 讲解了如何配置Grid视图，...
创建EXTJS组件，例如一个窗口（Window），可以使用`Ext.Window`构造函数。你需要指定窗口的属性，如标题、宽度、高度以及内容。例如，创建一个简单的窗口并显示它，可以这样写： ```javascript Ext.onReady...
在本实例中，Window组件可能是用于显示详细信息或进行特定操作的浮动视窗。 4. **SSM框架**： SSM是Java Web开发中常用的一个集成框架，由Spring MVC、Spring和MyBatis组成。Spring MVC处理HTTP请求，Spring负责...
4. **窗口管理**：使用Window组件创建可移动、可缩放的弹出窗口，模拟桌面应用的窗口行为。窗口之间可以实现拖动、堆叠、最大化、最小化等操作。 5. **事件处理**：通过监听用户的鼠标点击、键盘输入等事件，实现...
通过这个实例，你可以了解到如何结合ExtJS的组件特性和CSS样式来实现界面颜色的个性化定制。实践中不断尝试和调试，你会发现ExtJS的灵活性和强大之处。记得保存和备份你的代码，以便在未来项目中复用和改进。
#### 知识点一：EXTJS4.0 中 Window 组件的创建与配置 **知识点概述**： EXTJS4.0 是一款用于构建现代化 Web 应用的强大框架。在该版本中，创建组件的方式有所更新，引入了 `Ext.create()` 方法来替代之前的创建...
5. **API使用**：熟悉ExtJS 4.1提供的各种类库，如Grid、Panel、Window、Form等，以及它们的方法和属性。 6. **主题和皮肤**：了解如何自定义ExtJS的外观，包括使用SASS和Compass工具来修改主题。 7. **MVC模式**...
### ExtJS 实践大量实例讲解 #### 概述 ExtJS 是一款用于构建现代 Web 应用的强大框架，它提供了一系列丰富的 UI 组件、数据处理功能以及与后端交互的能力。本文将通过大量的实例来讲解如何使用 ExtJS 来开发高...
这个教程可能涵盖了ExtJS 2.0的基本概念，如组件、布局、数据绑定、事件处理、Ajax通信等，并且可能通过实例来演示如何使用这些特性。 "extjs中文API说明（chm）"则是ExtJS的中文版官方API文档，对于开发者来说是不...
这个问题描述了一个在使用ExtJS的Window组件时遇到的数据加载异常情况，特别是在窗口之间切换时。问题的核心在于，当一个新的Window被打开时，如果之前的一个窗口没有正确关闭，就可能导致数据缓存的问题，进而影响...
这个压缩包文件"ExtJs 3.1的一些实例源码.zip"很可能包含了一系列使用ExtJs 3.1编写的示例代码，这些示例可以用于学习和理解如何在实际项目中应用该框架。 首先，让我们来深入了解一下ExtJs 3.1的主要特性： 1. **...
在"开始ExtJs梦想之旅"的第二讲中，你将具体学习如何使用ExtJS创建第一个应用，从创建基本的窗口（Window）和面板（Panel），到添加控件并实现简单的交互。这一过程中，你将实践如何编写JavaScript代码来实例化组件...