EXT-GWT介绍
ExtJs中文教程
Ext入门基础
get,getDOM,getCmp的区别 DOM的增删改查
尺寸&大小,定位
动画
事件 类编程 AJAX
Ext入门基础
要学习及应用好Ext框架，必须需要理解Html DOM、Ext Element及 Component三者之间的区别。 每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都 有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作 DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象) 仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某 一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以 使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实 用方法。(通常使用Ext.get获得Element对象) 对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要 显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立 了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件 Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽 象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成 最终的页面效果。(通常使用Ext.getCmp获得Component对象)
方位、尺寸（如getHeight、getWidth）
Ext入门基础
DOM查询
获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 Ext.get('elId').next(); 类似的还有: Ext.get(„elId‟).prev();//上一个侧边节点 Ext.get(„elId‟).first();//第一个节点 Ext.get(„elId‟).last();//最后一个节点 Ext.get(„elId‟).parent();//父节点 比如要获取页面上所有的p标签,则可以使用: var ps = Ext.select('p'); 这样你就可以对所要获取的元素进行操作了,select()方法返回的是 positeElement对象,可以通过其中的each()方法对其所包含的元素进行遍历: ps.each(function(el) { el.highlight();//高亮 }); 当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement 对象上,如: ps.highlight();//select方法返回的结果可直接如同Element般地操作 或是: Ext.select('p').highlight(); 当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的XPath,HTML属性等
ExtJs框架介绍
Java 业务功能对象 调用Java Bean
JS 类继承架构
JS模板基类都继承BaseForm.js而来，在业务中调用相应的业务基类 JS模板基类都继承BaseForm.js而来，在业务中调用相应的业务基类 即可，如一般常用的单表、多表查询basesearchform.js,左右面板结 即可，如一般常用的单表、多表查询basesearchform.js, 构模板masterdetailform.js，由于javascript语言非常灵活，不像静态 构模板masterdetailform.js，由于javascript语言非常灵活，不像静态 强类型语言（比如Java）那样有固定的代码设计模式，而往往是不同 强类型语言（比如Java）那样有固定的代码设计模式，而往往是不同 的人就有不同的编程风格，具体情况可根据需求自行编写代码。
ExtJs 框架平台
系统介绍
廖楚霖 2009.06
目
1 2 3 4
录
ExtJs框架简介 ExtJs框架简介 ExtJs优劣 ExtJs优劣 系统构架 开发步骤
ExtJs框架简介 ExtJs框架简介
ExtJS是完全基于JS的RIA框架，它是有CSS + DIV + JS有机结合的 是完全基于JS的RIA框架，它是有CSS JS有机结合的
系统数据流程
程序在Ajax 页面发出命令，调用BizObject 方法后，生成XML的 程序在Ajax 页面发出命令，调用BizObject 方法后，生成XML的 Request请求 ，在解释后调用后Java程序向后台数据库发出相应的指 Request请求 ，在解释后调用后Java程序向后台数据库发出相应的指 令(如Select ,insert,delete等)来操作数据，在后台数据库完成这些指令 ,insert,delete等 后，再由Java程序返回结果给JSP,JSP再解释生成XML的Response结 后，再由Java程序返回结果给JSP,JSP再解释生成XML的Response结 果，BizObject在捕捉到XML的Response后，解释并返回结果给Ajax 果，BizObject在捕捉到XML的Response后，解释并返回结果给Ajax 页面并显示。
Ext
序言ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。
ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。
本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。
本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。
在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。
本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。
该《指南》当前在作为VIP文档发布，供该站的VIP用户阅读及下载。
凡是购买了《ExtJS 实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。
最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。
EXT官方网站中文手册
EXT官网教程目录EXT 中文手册 (1)EXT简介 (4)目錄 (4)下载Ext (5)开始！ (5)Element：Ext的核心 (5)获取多个DOM的节点 (6)响应事件 (6)使用Widgets (8)使用Ajax (10)EXT源码概述 (12)揭示源代码 (12)发布Ext源码时的一些细节 (13)我应该从哪里开始？ (14)适配器Adapters (14)核心Core (14)Javascript中的作用域（scope） (14)事前准备 (14)定义 (14)正式开始 (15)window对象 (15)理解作用域 (16)变量的可见度 (16)EXT程序规划入门 (17)事前准备 (17)需要些什么？ (17)applayout.html (17)applayout.js (18)公开Public、私有Private、特权的Privileged？ (20)重写公共变量 (22)重写（Overriding）公共函数 (22)DomQuery基础 (23)DomQuery基础 (23)扩展EXT组件 (30)文件的创建 (30)Let's go (34)完成 (36)EXT的布局（Layout） (38)简单的例子 (39)加入内容 (42)开始使用Grid (52)步骤一定义数据(Data Definition) (52)步骤二列模型（Column Model） (53)Grid组件的简易分页 (54)G r i d数据 (54)怎么做一个分页的G r i d (55)分页栏T o o l b a r (55)EXT Menu组件 (56)创建简易菜单 (56)各种I t e m的类型 (58)I t e m属性 (58)在U I中摆放菜单 (58)M e n u的分配方式： (59)练一练 (61)动态添加菜单按钮到T o o l b a r (61)更方便的是 (62)下一步是 (62)模板（Templates）起步 (62)第一步您的HTML模板 (62)第二步，将数据加入到模板中 (63)下一步 (63)学习利用模板（Templates）的格式化功能 (63)正式开始 (63)下一步 (65)事件处理 (65)非常基础的例子 (65)处理函数的作用域 (65)传递参数 (66)类设计 (66)对象创建 (66)使用构造器函数 (67)方法共享 (67)表单组件入门 (68)表单体 (68)创建表单字段 (68)完成表单 (69)下一步 (70)为一个表单填充或提交数据 (70)让我们开始吧 (70)读取我们的数据 (71)EXT中的继承 (72)补充资料 (73)Ext 2 概述 (73)组件模型Component Model (75)容器模型Container Model (79)布局Layouts (80)Grid (83)XTemplate (83)DataView (84)其它新组件 (84)EXT2简介 (85)下载Ext (85)开始！ (86)Element：Ext的核心 (86)获取多个DOM的节点 (87)响应事件 (87)使用Widgets (89)編輯使用Ajax (92)TabPanel基础 (95)Step 1: 创建HTML 骨架 (95)Step 2: Ext结构的构建 (96)Step 3: 创建Tab控制逻辑 (98)EXT简介无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。
ext开发手册
ext开发手册一、简介EXT是一个针对构建富应用程序的JavaScript框架，它拥有丰富的组件库和强大的功能。
本手册将为开发人员提供完整的EXT开发指南，包括基础知识、常用组件和开发技巧等内容。
二、基础知识1. 安装和配置EXT：首先，下载EXT框架的压缩包并解压到项目的根目录。
然后，在HTML页面中引入EXT的必要文件，包括CSS和JavaScript。
最后，在需要使用EXT的页面中初始化EXT环境。
2. EXT的核心概念：理解EXT的基本概念对于开发者来说至关重要。
常见的核心概念包括组件、容器、布局和事件等。
组件是EXT的基本构建块，它可以是按钮、表单、树等等。
容器负责管理和布局组件，而布局则定义了组件的排列方式。
事件是EXT中的重要特性，可以用于处理用户交互和系统响应。
三、常用组件1. 表单组件：EXT提供了各种强大的表单组件，如文本框、下拉列表、复选框等。
开发人员可以根据需求选择合适的组件，并根据组件的配置进行自定义设置。
例如，可以通过设置验证规则和错误提示来有效地验证用户输入。
2. 树组件：EXT的树组件是管理层次数据的理想选择。
开发人员可以通过构建树节点和设置节点属性来构建一个功能齐全的树结构。
树组件还支持展开、折叠、选择和拖放等交互操作，使得数据的展示与操作更加灵活。
3. 网格组件：EXT的网格组件是处理大量数据的最佳工具。
通过设置网格的列模型和数据模型，可以实现自定义的数据显示和排序。
网格组件还支持分页、过滤和编辑功能，为用户提供便利的数据处理方式。
四、开发技巧1. 使用样式：EXT提供了丰富的CSS样式，可以为组件添加不同的外观和交互效果。
开发人员可以通过应用样式类名称或自定义样式来实现个性化的外观效果。
同时，也可以使用主题文件来快速地改变整个应用程序的外观。
2. 数据绑定：EXT支持将数据与组件进行绑定，以实现动态数据的展示和交互。
通过设置数据模型和绑定关系，可以在数据更新时自动更新组件的显示内容。
GWT 开发者手册_V2
GWT开发者手册格式规范：这种字体表示代码或术语文档目的：对新进员工进行GWT技术培训，使他们可以在以前没有接触过GWT的基础上，通过本文档，经过短期学习，即可使用GWT进行日常开发工作。
GWT版本：gwt-windows-1.3.3面向读者：熟悉JAVA语言，有用J2EE开发三层架构软件系统的经验WEB应用程序开发者。
一、基本概念核心GWT概念，诸如：把JAVA原码编译为JAVASCRIPT原码，调试，跨浏览器支持，和定义模块（module）等。
GWT编译器主要用于把JAVA应用程序转换成对应的JAVASCRIPT应用程序GWT的核心是一个编译器，它可以把JAVA代码转换成JAVASCRIPT代码，把用于实际开发工作的JAVA应用程序转变成等价的JAVASCRIPT应用程序，一般来说：1.如果你的GWT应用在主机模式中编译运行，2.并且GWT把你的应用程序编译成JAVASCRIPT应用程序，而没有报错，3.那么的你的应用程序将会以同样的方式在WEB浏览器中工作，就像在主机模式中一样。
GWT编译器支持大多数JAVA语言特性。
GWT运行时库仿真了JAVA运行时库的一个子集。
注意：1.语言支持：GWT可以编译J2SE1.4.2或更早版本。
但有一些不一致需要注意。
●固有类型byte,char,short,int,long,float,double,Object,String,和数组都是支持的。
毕竟，在JAVASCRIPT语言中没有64位整型，所以long类型变量被映射到JAVASCRIPT的双精度浮点类型值。
为了保证主机模式和WEB模式中最大的一致性，我们推荐使用int类型变量●异常try,catch,finally和用户自定义的异常都可以正常支持，但是注意,在WEB模式中Throwable.getStackTrace()方法不被支持。
●断言GWT编译器解析JAVA assert声明，但是它们不会被生成对应的JAVASCRIPT代码。
EXT教程
Tutorial: 教程：Ext简介Summary: 对Ext库的总体概述和完成一些常见的程序任务。
新用户应从这里开始。
Author: Brian MoeskauTranslator: Paco CheungPublished: March 10, 2007Languages: English Dutch SpanishChinese Russian Portuguese 无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。
本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。
否则的话，请从阅读初学JavaScript资源开始。
下载Ext如果你未曾下载过，那应从这里下载最新版本的Ext /downloads。
针对你的下载需求，有几个不同的弹性选项。
通常地，最稳定的版本，是较多人的选择。
下载解包后，那个example文件夹便是一个探索Ext的好地方！开始！我们将使用Ext，来完成一些JavaScript任务。
Zip文件包括三个文件：ExtStart.html, ExtStart.js和ExtStart.css。
解包这三个文件到Ext的安装目录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新建目录“tutorial”。
双击ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。
如果是一个Javascript错误，请按照页面上的指引操作。
在你常用的IDE中或文本编辑器中，打开ExtStart.js看看：Ext.onReady可能是你接触的第一个方法。
这个方法是指当前DOM加载完毕后，保证页面内的所有元素能被Script引用（reference）。
你可删除alert()那行，加入一些实际用途的代码试试：Ext.onReady(function() {alert("Congratulations! You have Ext configured correctly!");});Element：Ext的核心大多数的JavaScript操作都需要获取页面上的某个元素（reference）,好让你来做有趣的事情。
ext--js框架
ext目录Ext简介Ext是一个强大的js类库，以前是基于YAHOO-UI,现在已经完全独立了,主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid 了,编程思想是基于面向对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),在引用ext类库的时候.这三个文件必不可少.它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建富客户端的常用的组件。
从 Ext 2开始，商业版(针对那些以盈利为目的的开发方)要收费了。
这可能会影响一些他的应用前景。
目前的最新版本为4.0Ext动画功能介绍一下Ext预置的11个动画功能。
1.slideIn/slideOut：元素的滑进或滑出效果。
默认slideIn是从顶部滑进的，而slideOut 是从底部滑出的，可通过修改第1个参数设置滑进或滑出位置。
其使用方法请看下面代码。
var el = Ext.get('elId');el.slideIn(); //从顶部滑进el.slideOut(); //从底部滑出el.slideIn('l',{ easing: 'easeOut', duration: .5 }); //从左边滑进2.puff：元素慢慢向四周扩大并逐渐消失。
当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。
如果需要删除元素，请设置remove属性为true。
其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式el.puff();//自定义方式，元素消失后删除元素el.puff({ easing: 'easeOut', duration: .5, remove: true, useDisplay: false })3.switchOff：元素闪烁一下，然后往中心折叠（类似关掉电视）。
进阶GWT
使用Google Web Toolkit、Apache Derby 和Eclipse 构建Ajax 应用程序，第 1 部分: 梦幻前端利用Google Web Toolkit 在Java 框架中开发Ajax 应用程序级别：中级Noel Rappin (noelrappin@), 高级软件工程师, Motorola, Inc.2007 年2 月02 日在通往创建在用户Web 浏览器中运行的动态Java™Script 应用程序的征途中，Google Web Toolkit（GWT）是举足轻重的一步。
使用GWT，开发人员可以利用熟知的Java 技术设计用户界面（UI）和事件模型，而GWT 会完成使代码对所有主流浏览器友好的繁重工作。
这是本系列的第一篇文章，介绍GWT 基础知识，包括GWT 是怎样使您创建一个Asynchronous JavaScript + XML（Ajax）应用程序，而且依然在Java 语言中编写代码的。
探索如何创建和运行一个小型的样本GWT 应用程序——近来十分流行的一项Web 2.0 新业务，称为Slicr，在线销售比萨饼。
GWT 使得构建富Ajax 浏览器客户机界面比构建传统Java GUI 界面还要轻松。
然而，即使是GWT 这样出色的技术也无法独自构建出一个完整的Web 应用程序。
您还必须有一个服务器上的数据存储和某种类型的框架，以便将数据转换成GWT 可从服务器传递给其客户的Java 对象。
在这一系列文章中，您将使用Apache Derby 这个100% 纯Java 数据库，可将其嵌入与其余服务器端代码相同的Java 虚拟机（JVM）之中。
本系列的第一篇文章主要探讨GWT。
在这里，您将了解如何设置GWT，并创建一个简单的客户机界面来响应用户的操作。
后续文章将为您展示如何设置Derby 数据库，并将GWT 前端与基于Derby 的后端连接。
最终，您将学会如何将在开发环境之外部署您的系统。
ext基础
ExtJS引用 ExtJS引用
到官方网站 /products/extjs/download.php下载必要 的核心包； 解压ext-4.0.7-gpl.zip； 在Html中引入相应文件。 <!—引入ExtJs的样式文件--> <link type="text/css" rel="Stylesheet" href="extjs/res ources/css/ext-all.css" /> <!—引入ExtJs的框架文件--> <script type=“text/javascript” src=“extjs/extall.js”></script>
表单与元素组件
radio Ext.form.field.Radio 单选按钮 textarea Ext.form.field.TextArea 区域文本 框 Text Ext.form. Field.Text 表单文本框 time Ext.form. field.Time时间录入项 trigger Ext.form.field.Trigger 触发录入项 在这些组件中最常用的组件有： grid、panel、treepanel、 form、 window等等
allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }], buttons: [{ text: 'Reset', handler: function() { this.up('form').getForm().reset(); } }, { text: 'Submit',
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
difficult and error prone develop and debug AJAX applications in the Java language using the Java development tools of your choice When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML.
a “hosted” web browser two Java class libraries (one the JAVA API and another
GWT API) JRE Emulation library
GWT Compiler
converts Java source into JavaScript, transforming your
使用其他 JavaScript 库和本机 JavaScript 代码
轻松支持浏览器的后退按钮和历史记录 高效地对应用程序进行本地化 使用选择的开发工具提高生产力 使用 JUnit 测试代码
GWT Architecture
a Java-to-JavaScript compiler
GWT communicating with server
Making HTTP requests <inherits name="com.google.gwt.http.HTTP" /> RequestBuilder/RequestCallback/Request/Response
EXT-GWT
working Java application into an equivalent JavaScript application. Once compilation completes sucessfully, directories will be created containing the JavaScript implementation of your project. The compiler will create one directory for each module it compiles Generate bootstrap files and application files
Sprin g Hibernat e
DB
EXT-GWT
Controller 注册事件 创建view 处理事件
调用异步接口 将结果转发给view
Controller级联
EXT-GWT
View 负责界面布局及显示 处理controller转发过来的事件，刷新界面显示 发送事件
GWT communicating with server
GWT RPC Serializable User-defined classes
Assignable to IsSerializable or Serializable All non-final, non-transient instance fields are themselves serializable Have a default constructor or no constructor at all
Deferred Binding
a feature of the GWT compiler that works by
generating many versions of code at compile time, only one of which needs to be loaded by a particular client during bootstrapping at runtime Corresponding to Java Reflection
GWT, Why another framework?
Javascript, can we avoid it?
Javascript, hard to debug Why separate the Client/Server implementation
techinique?
Introduction to GWT
As Ajax becomes popular, more javascript
classes/libraries are provided to implement timeconsuming dynamic behaviors Those javascript classes/libraries are designed for developers who are already fairly well advanced in their JavaScript knowledge
<html> <head>……………</head> <body>…………….</body> <script type=“javascript”>…………………</script> </body> </hmtl>
WEB Application advanced topics
MVC
Struts/webwork/Spring MVC/Ruby on Rails
WEB2.0-Ajax
Browser Browser HTTP Request HTTP Response HTML/JavaScript XMLHttpRequest Server
XML/Json/JavaScript/HTML
AJAX JavaScript call
WEB2.0-Ajax
XHTML/HTML+Javascript
GWT communicating with server
GWT RPC Handling Exceptions
Checked Exceptions Unexpected Exceptions InvocationException IncompatibleRemoteServiceException
Introduction to GWT
the Java-to-JavaScript compiler to distill your
application into a set of JavaScript and HTML files that you can serve with any web server makes the app cross browser compatible, making the feveloper’s life much easier
Host mode Development and debug Embeded jetty server Web mode after the GWT compiler translates your Java source code (plus the source code of the GWT library and any third party libraries) into optimized JavaScript
④
Web Server
⑥ ② ③ ① WEB Browser ⑤
Service/Business
① ② ③ ④ ⑤ ⑥
HTTP GET/POST extract parameters encapsulated as objects direct request to handler call service/business methods and pass the objects return the business objects/results flush the result page to browser
应用开发部内部培训
林强 2010-7-29
WEB Application fundamentals
HTTP HTTP GET/POST，session，cookie，content-type， encoding… WEB HTML，DOM，CSS，JavaScript，Ajax，JQuery， prototype，cross-browser…
GWT Project structures
HTML Host page Any HTML page can include a GWT application via a SCRIPT tag, this html page will be called host page 例子：
<body> <script language="javascript" src="calendar/calendar.nocache.js"></script> <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> </body>