废话：
我一直主张各司其职，页面的UI就应该由专门的人去做（flash，css等）而不应该交给js来完成，不过最近在周围朋友的影响下对ext也充满了好奇，毕竟ext的UI表现还是很优美的（本人是个大老粗对审美就这点品味了），于是开始决定学习ext并将其记录下来，希望对他人有用。
说明：
本人是jquery的的fans，好在ext与jquery并不冲突，在写演示代码时我将主要使用jquery+ext
正题：
今天刚开始学习ext于是从最简单的对话框开始。
首先搭建好ext环境（HTML中引入对应的js文件）
<style>
@import "../resources/css/ext-all.css";
</style>
<script src="../adapter/jquery/jquery.js"></script>
<script src="../adapter/jquery/ext-jquery-adapter.js"></script>
<script src="../ext-all.js"></script>
其中css为ext的样式，如果没有这个文件那ext的界面会奇丑无比。
由于我喜欢用jquery于是我导入了jquery.js与ext-jquery-adapter.js文件
这里可以根据个人喜欢进行修改在ext的adapter文件夹下有prototype，yui，ext，jquery四种可以选择。
ext-all.js是ext主要功能的合集
搭建好环境后就可以开始写代码啦。
在ext中所有对话框都有Ext.MessageBox进行管理，可以缩写成Ext.Msg。
一个简单的alert我们可以调用Msg中的alert方法
<body>
<button id="generalBtn">普通对话框</button><br/>
$("#generalBtn").click(function(){
Ext.Msg.alert("title", "hello word",function(btn){alert(btn)});
});
</body>
alert共有4个参数前2个是必填的，第三个是回调函数当对话框关闭时将调用该函数，第四个参数是回调函数的作用域（这个参数具体什么用我目前不清楚，有清楚的朋友还望指点一二）。
Msg还包括了一些常用的对话框比如confirm,prompt基本用法与alert相同
<button id="confirmBtn">确认对话框</button><br/>
<button id="promptBtn">输入对话框</button><br/>
$("#confirmBtn").click(function(){
Ext.MessageBox.confirm("title", "hello word",function(btn){
alert(btn);
});
});
$("#promptBtn").click(function(){
Ext.MessageBox.prompt("title", "输入内容", function(btn,text){alert("用户按下的按钮是:"+btn+"用户输入的内容是"+text)},null, true, 'value');
});
Msg还包括progress与wait对话框，用法也比较简单
<button id="progressBtn">progressBtn</button><br/>
<button id="waitBtn">wait</button><br/>
function time (i, messageBox){
messageBox.updateProgress(i,"progressText", "进程");
if(i>=1){
messageBox.hide();
return;
}else{
setTimeout(time, 500, i+0.1,messageBox);
}
}
$("#progressBtn").click(function(){
var pro = Ext.MessageBox.progress("title", "进程", "progressText");
time(0.1,pro);
});
$("#waitBtn").click(function(){
Ext.MessageBox.wait("等待中...", "title");
});
Msg中其实最核心的show方法，他可以根据配置对象定义一个自定义的对话框，其实刚才所见的所有对话框都是ext帮我们事先定义好的而已，其内部都是调用show方法
show方法很简单只有一个参数就是配置对象，但这个对象的属性很多，具体内容可以参考API
调用方法如下
<BUTTON ID="showBtn">自定义对话框</BUTTON>
<button id="testRBtn" style="float:right">右边的按钮</button>
$("#showBtn").click(function(){
Ext.MessageBox.show({
animEl:"testRBtn",
buttons:Ext.MessageBox.YESNOCANCEL,
title:"自定义对话框",
// fn:callback,
icon:Ext.MessageBox.WARNING,
msg:"o(∩_∩)o...哈哈"
});
});
分享到：
相关推荐
### GWT-Ext体验之旅知识点解析 #### 一、GWT-Ext简介 - **定义**: GWT-Ext是一款基于Google Web Toolkit (GWT) 和 ExtJS 的网页开发控件库，它为纯Java语言的富互联网应用提供了一个快速开发平台。 - **特点**: ...
GWT-Ext 的核心特点在于它扩展了 GWT，融合了 ExtJS 的丰富界面组件，包括有排序功能的表格（Grid）、分页、过滤、拖拽功能的树、自定义的组合下拉框（Combobox）、目录、对话框、表单（Form）等。 1. **GWT-Ext 的...
4.7. 验证苦旅 4.7.1. 不能为空 4.7.2. 最大长度，最小长度 4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做，默认的平铺布局 4.8.2. ...
EXTJS是一种基于JavaScript的前端框架，用于构建富客户端应用程序。EXTJS的核心是其强大的组件模型，它提供了丰富的...EXT简单案例作为入门资源，将帮助你快速上手EXTJS，理解其工作原理，并开始你的EXTJS开发之旅。
4.7. 验证苦旅 4.7.1. 不能为空 4.7.2. 最大长度，最小长度 4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.7.6. 使用后台返回的校验信息 4.8. 关于表单内部控件的布局问题 4.8.1. 什么...
这只是ExtJS 4.0学习之旅的起点。随着对API的深入理解和实践，你会逐渐掌握如何创建复杂布局、使用各种组件（如表格、树、图表等）、实现数据绑定和远程数据交互等高级特性。记得时刻参考官方文档，它是解决疑问和...
这只是ExtJS4学习之旅的开始。在深入学习过程中，你将接触到更多的组件（如Grids、Forms、Trees等）、布局管理、数据绑定、Ajax交互以及图表等功能。理解并熟练掌握这些概念和API，将使你能够构建功能丰富、用户体验...
ExtJS 是一个强大的JavaScript库，主要用于构建富客户端的Web应用程序。在本文中，我们将深入探讨ExtJS 4的基础知识和如何开始学习。 首先，我们从获取ExtJS开始。...祝你在ExtJS的学习之旅中取得成功！
《Extjs4.0学习指南》 Extjs4.0是一个强大的JavaScript框架，主要用于构建富客户端Web应用程序。其丰富的组件库、优雅的API和高度可定制性，使其成为开发复杂前端...希望这个指南能帮助你顺利开始Extjs4.0的学习之旅。
- **开始组件学习之旅** - 从最基本的组件开始，逐步深入学习Extjs的各种组件。 - 按钮是最常用的组件之一，用于触发事件或提交表单。 - **被设计得面目全非的按钮** - 指的是按钮组件提供了丰富的定制选项，...
- **组件学习之旅**：开启学习Extjs组件的旅程。 - **按钮**：介绍Extjs中按钮组件的各种特性和样式。 - **日期选择器Ext.DatePicker**：学习如何使用日期选择器组件。 #### 第十章：数据与ComboBox - **数据概念**...
在开始ExtJs的学习之旅前，文档指导我们首先进行环境准备，包括下载框架、部署开发环境、使用SpketIDE等。文档强调了资源的重要性，并提供了一些建议的小结，确保读者能够在良好的环境下进行学习和实践。 三、...
- **开始组件学习之旅**: 引导读者进入Extjs组件的学习之旅。 - **被设计得面目全非的按钮**: 介绍了Extjs中按钮组件的灵活性和可定制性。 - **日期选择器Ext.DatePicker**: 详细介绍了日期选择器组件的使用方法，...
#### 一、开始组件学习之旅 标志着从基本组件的学习开始，逐步构建更复杂的用户界面。 #### 二、被设计得面目全非的按钮 介绍了ExtJS中按钮组件的高级定制功能，包括图标、文本、工具提示等。 #### 三、日期选择器...
《MATLAB R202xa安装指南》 MATLAB是一款强大的数学计算和编程环境，广泛应用于工程、科学计算以及数据分析等领域。...准备好虚拟光驱软件，遵循指南，你就能成功安装MATLAB R202xa，开启你的数学与编程之旅。
- **协议介绍**：SMTP协议负责邮件的发送和接收，而TCP/IP则是互联网的基础协议之一，用于数据在网络间的传输。 ### 14. 屏幕保护程序的最短等待时间 - **知识点概述**： - 在Windows 7中，用户可以自定义计算机...