EXT(js)教程
Ext入门学习系列（一）环境配置
Ext⼊门学习系列（⼀）环境配置⼀、EXT是什么？1. Ext是⼀个Ajax框架，可以⽤来开发带有华丽外观的富客户端应⽤，使得我们的b/s应⽤更加具有活⼒及⽣命⼒，提⾼⽤户体验；2. Ext是⼀个⽤javascript编写，与后台技术⽆关的前端ajax框架。
因此，可以把Ext⽤在.Net、Java、Php等各种开发语⾔开发的应⽤中；3. Ext是⾯向对象的；4. Ext没有你想象中的那么难；⼆、Ext从哪⾥获取？解压后有50M⼤⼩，⾥⾯包含了很多其他的⽂档。
三、Ext环境怎么搭建？我们只需要从⾥⾯找出⾃⼰需要的⽂件即可。
按照顺序在根⽬录下找到ext-all.js（最主要的Ext代码库⽂件），然后在adapter/ext/⽬录下找到ext-base.js（EXT的适配器），接下来就需要找语⾔⽂件了名字叫“ext-lang-zh_CN.js”，最后需要把整个样式表⽂件夹找到，在resources ⽂件夹中。
把所有找到的⽂件全部复制到我们需要的⽂件夹下，暂定为Ext⽂件夹，则该⽂件夹下⾯的⽬录结构应该如：我们的站点⽂件放在上级⽬录，如：到此为⽌，环境配置基本完毕。
四、Ext代码怎么写？接下来我们⼀起来写⼀个测试例⼦，因为是JS库，所以⽹页中要做的第⼀件事情就是添加引⽤，在需要⽤到Ext的页⾯源⽂件头部加上：<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> //引⼊样式<script type="text/javascript" src="Ext/ext-base.js"></script>//引⼊适配器<script type="text/javascript" src="Ext/ext-all.js"></script>//引⼊主⽂件<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>//语⾔包接下来才可以正式写，先来⼀个测试：<script type="text/javascript">function start(){Ext.MessageBox.alert("测试","看我漂亮不!");}Ext.onReady(start);//所有的程序都是从这⾥开始执⾏，⾥⾯写函数名</script>如果在VS2010中上⾯的代码是可以直接点出来的，所有代码以Ext开始，如果想弹个对话框，就选Message即可。
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属性等
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世界吧。
ExtJS 配置和表格控件使用
ExtJS 配置和表格控件使用ExtJS是一套AJAX控件，本人认为，它是目前我见过最好最美的JS控件库，所以非常有学习和使用价值，如果你还没有接触过ExtJS或者压根对其不感兴趣，那么没有必要看下去了。
ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。
如果您的项目对网页响应时间有严格的限制，或者客户端操作系统过于陈旧，一定不要选择ExtJS。
本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。
目前最新版本为3.0，但是本文主要介绍2.2版本。
一、 ExtJS下载以及配置1、下载地址：/(这是官网，大家可以选择自己喜欢的版本下载)2、配置过程，假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码)，配置过程如下：(1) 新建一个页面文件Helloworld.html(2) 在<head>和</head>之间添加如下代码：代码如下:<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /><script type="text/javascript" src="../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.MessageBox.alert('HelloWorld','Hello World');})</script>(3) 这里注意<script></script>不能用</script>取代(4) js的导入顺序不要更改(3) 如果弹出一个HelloWorld的对话框，则代表配置成功。
ext教程
ext教程EXT（JavaScript Extensions）是一种用于制作浏览器扩展的标准，它允许开发者以交互式方式修改和自定义Web页面的行为和外观。
在本教程中，我们将介绍如何使用EXT来开发浏览器扩展。
我们将涵盖EXT的基本概念、开发环境的设置、常用API的使用以及实例应用的创建。
首先，我们需要了解EXT的基本概念。
EXT是基于JavaScript 和HTML的，它允许我们通过注入代码来修改Web页面的行为。
我们可以使用EXT来添加自定义按钮、修改页面样式、拦截网络请求等。
为了开始开发EXT扩展，我们需要设置开发环境。
首先，我们需要安装一个支持EXT的浏览器，如Google Chrome或Mozilla Firefox。
然后，我们需要安装开发者工具，如Chrome开发者工具或Firefox开发者工具。
接下来，我们将介绍EXT的常用API。
EXT提供了一组API，用于访问和修改Web页面的各个部分。
例如，我们可以使用API来找到页面上的特定元素，修改其样式或内容。
我们还可以使用API来发送网络请求或拦截已有的请求。
最后，我们将创建一个实例应用来演示EXT的使用。
我们将开发一个简单的扩展，用于在Facebook页面上添加一个自定义按钮。
当用户点击按钮时，它会向后台服务器发送一个请求，并显示返回的数据。
在这个实例应用中，我们将演示如何创建一个扩展程序，并在Manifest文件中指定其基本属性。
我们还将展示如何使用Content Script来注入我们的代码到页面中，并使用Popup来创建一个显示在浏览器窗口中的弹出窗口。
通过这个教程，您将学习到EXT的基本概念、开发环境的设置、常用API的使用以及实例应用的创建。
您将了解如何使用EXT来修改和自定义Web页面的行为和外观。
这将对您开发具有定制功能的浏览器扩展非常有帮助。
总结来说，EXT是一种用于制作浏览器扩展的标准，它允许开发者以交互式方式修改和自定义Web页面的行为和外观。
ext.js query用法
ext.js query用法Ext.js 是一个流行的 JavaScript 框架，用于构建富客户端应用程序。
它提供了丰富的 API 来简化 DOM 操作、事件处理、数据绑定等任务。
在 Ext.js 中，query 是一个非常有用的方法，用于选择和操作 DOM 元素。
使用 query 方法，可以轻松地选择一个或多个 DOM 元素，并对它们进行操作。
下面是一些 query 方法的常见用法：1. 选择单个元素：javascript.var element = Ext.query('#myElement');这将选择 id 为“myElement”的元素，并将其存储在变量element 中。
2. 选择多个元素：javascript.var elements = Ext.query('.myClass');这将选择所有 class 为“myClass”的元素，并将它们存储在一个数组中。
3. 选择子元素：javascript.var childElements =Ext.query('#parentElement .childElement');这将选择 id 为“parentElement”的元素内部所有 class 为“childElement”的子元素，并将它们存储在一个数组中。
4. 使用 CSS 选择器：javascript.var selectedElements = Ext.query('div.myClass >p:first-child');这将使用 CSS 选择器来选择所有 class 为“myClass”的 div 元素中第一个 p 元素，并将它们存储在一个数组中。
一旦选择了需要操作的元素，就可以使用 Ext.js 提供的其他方法来对它们进行操作，例如修改样式、绑定事件、添加/移除元素等。
总之，Ext.js 的 query 方法为开发人员提供了一种简单而强大的方式来选择和操作 DOM 元素，使得构建交互丰富的客户端应用变得更加容易和高效。
EXTJS中文手册
varparagraphClicked =function(e){
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
注意得到的e.target是DOM节点，所以我们首先将其转换成为EXT的Elemnet元素，然后执行欲完成的事件，这个例子中，我们看见段落是高亮显示的。
标签），没有一个是有ID的，而你想轻松地通过一次操作马上获取每一段，全体执行它们的动作，可以这样做：
//每段高亮显示
Ext.select('p').highlight();
DomQuery的选取参数是一段较长的数组，其中包括W3CCSS3 Dom选取器、基本XPatch、HTML属性和更多，请参阅DomQuery API文档以了解这功能强大的库个中细节。
varparagraphClicked =function(){
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
到目前为止，我们已经知道如何执行某个动作。但当事件触发时，我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢？要明确这一点非常简单，Element.on方法传入到even handler的function中（我们这里先讨论第一个参数，不过你应该浏览API文档以了解even handler更多的细节）。在我们之前的例子中，function是忽略这些参数的，到这里可有少许的改变，——我们在功能上提供了更深层次的控制。必须先说明的是，这实际上是Ext的事件对象（event object）,一个跨浏览器和拥有更多控制的事件的对象。例如，可以用下列的语句，得到这个事件响应所在的DOM节点：
ExtJs可视化设计教程_ext_Designer_Sencha_Architect
这一个别指导最与相关？Ext 设计者，1. x。
Ext 设计者是作什么的？和设计者建筑网络应用UI和设计者展开UI 成份对数据连接输出一个计画Ext 设计者是作什么的？设计者为Ext JS 网络申请是图解式使用者接口建立者。
它的简单易用累赘和下降环境促使你很快地设计原型你的申请接口成份，把接口成份连结到你的数据，而且为每个成份输出很好形成、物体导向的密码。
程序师和非程序师一样能使用设计者在帮助使更快速地被开始而且使较快速的重复成为可能的计画的申请设计上合作。
与设计者在一起，你能：很快地而且容易地建立复杂的表格。
变化成份地面区划和以货易货控制用钮扣的点击的类型。
关于写落实密码、，而非样板文件UI 密码的焦点。
另外数据对于关于设计者和Ext JS 的较多资讯：看这？设计者示范？对于对设计者的快介绍。
对于关于的资讯最近的设计者释放和更新，见到这？设计者Changelog。
如果你对Ext JS 很新，见到成份和容器模型数据在这？Ext JS 概观。
为关于任何Ext JS 班级或方法的细节，见到这？Ext JS 美国石油协会叁考。
和设计者建筑网络应用UI设计者被设计连同你的现有发展环境和工具被用。
它不是日蚀或你的喜爱本文编者的一个替换。
被设计者产生的密码能进入你的现有IDE 之内被进口，而且你能在你的IDE 之内的设计者的外面或与你的选择的编者编辑UI 落实文件。
当使用设计者，你：在设计者帆布上展开你的UI 成份。
配置成份。
连接到你的数据商店。
输出你的计画。
实现你的事件处理和习惯方法在这产生。
js 申请。
重要的！？当你第一次输出你的计画，两个Javascript 文件为你的计画的每个最高阶层的成份被产生。
文件与这。
ui.js 延长为UI 成份包含恶劣的班级。
你在文件中扩充这一个基础班级与这。
js 延长实现你的事件操作者和订制的功能。
不要修正这。
ui.js 文件直接地，每当你修正并且输出你的计画，它将会重写。
extJS4x中文API学习教程
Html 文件中只引入了一个 css和 2 个 js 文件， 注意引用路径和你建立文件路径是否能匹配， 如果路径没有问题的话，打开浏览器输入
http://localhost:8080/Ext4/helloworld.html 您将会看到浏览器里显示一个 panel，标题是 Hello
Ext,内容 Hello! Welcome to Ext JS. ，如果没有，请查看是否有路径不匹配。 其他：
,打印出 'hello world!' 字样 .
获取元素Biblioteka 还有一个常用的方法 ,就是获取页面上的元素了 ,ExtJS 提供了一个 get 方法 ,可以根据 ID 取到
页面上的元素 :
var myDiv = Ext.get('myDiv'); 会取到页面上 ID 为 'myDiv' 的元素 .如果使用 Element.dom 的方法 ,则可以直接操作底层的
,看看页面打开后
（先建立 js 和 html 文件，将如下代码加入 js 文件中， html 文件相应引入对应的 js 文件， 本 文档所有示例代码均如此方式运行以下不再重复）
Ext.onReady(function() { alert('hello world!'); }); 上面的代码将在页面加载完毕后弹出一对话框
无效的。如果在 fit 布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当 客户要求一个 window 或 panel 中放置一个 GRID 组件， grid 组件的大小会随着父容器的大
小改变而改变。 示例代码：
Ext.application({ name: 'HelloExt', launch: function() {
ext.js用法
Ext JS 是一个用于构建丰富交互式Web 应用程序的JavaScript 框架。
它提供了许多用于创建用户界面的工具和组件，例如表格、表单、按钮、滑块等。
以下是使用Ext JS 的一些基本步骤：1.引入Ext JS 库：首先，您需要在HTML 文件中引入Ext JS 库。
您可以从Ext JS官方网站下载库文件，并将其放置在您的Web 服务器上。
然后，在HTML 文件中使用<script>标签引入库文件。
html复制代码<script src="path/to/ext.js"></script>2.创建Ext JS 应用程序：使用Ext JS，您可以创建一个应用程序对象来管理整个应用程序的生命周期。
您可以使用Ext.create()方法创建一个应用程序对象。
javascript复制代码Ext.create('Ext.app.Application', {name: 'MyApp',launch: function() {// 在这里编写应用程序的启动代码}});3.创建组件：在Ext JS 中，您可以创建各种类型的组件，例如表格、表单、按钮等。
您可以使用Ext.create()方法创建一个组件对象，并指定组件类型和配置选项。
javascript复制代码Ext.create('Ext.button.Button', {text: 'Click me',renderTo: Ext.getBody(), // 将按钮渲染到页面中handler: function() {// 在这里编写按钮点击事件的代码}});4.配置组件：您可以设置组件的各种属性，例如大小、位置、样式等。
您可以在创建组件时使用配置选项来设置这些属性。
5.处理事件：在Ext JS 中，您可以处理各种事件，例如点击事件、键盘事件等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Ext简介我们将讲讲怎么使用Ext，来完成一些JavaScript常见的任务。
如果你想自己试试，就应该先下IntroToExt2.zip，用来构建已下面的Ext代码。
Zip包里有三个文件：ExtStart.html, ExtStart.js和ExtStart.css。
解包这三个文件到Ext的安装目录中（例如，Ext 是在“C:\code\Ext\v2.0”中，那应该在"v2.0"里面新建目录“tutorial”。
双击ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。
如果出现了Javascript错误，请按照页面上的指引操作。
现在在你常用的IDE中或文本编辑器中，打开ExtStart.js看看。
Ext.onReady(function(){ alert("Congratulation s! You have Ext configured correctly!");});Ext.onReady可能是你接触的第一个也可能是在每个页面都要使用的方法。
这个方法会在DOM 加载全部完毕后，保证页面内的所有元素能被Script引用（reference）之后调用。
你可删除alert()那行，加入一些实际用途的代码试试。
Element：Ext的核心大多数的JavaScript操作都需要先获取页面上的某个元素的引用（reference）,好让你来做些实质性的事情。
传统的JavaScript做法，是通过ID获取Dom节点的：var myDiv = document.getElementById('my Div');这毫无问题，不过这样单单返回一个对象（DOM节点），用起来并不是太实用和方便。
为了要用那节点干点事情，你还将要手工编写不少的代码；另外，对于不同类型浏览器之间的差异，要处理起来可真头大了。
进入Ext.element 对象。
元素（element）的的确确是Ext的心脏地带，--无论是访问元素（elements）还是完成一些其他动作，都要涉及它。
Element的API是整个Ext库的基础，如果你时间不多，只是想了解Ext中的一两个类的话，Element一定是首选！由 ID获取一个Ext Element如下（首页ExtStart.htm包含一个div，ID名字为“myDiv”，然后，在ExtStart.js中加入下列语句）： The correspondingcode to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js): Ext.onReady(function(){var myDiv =Ext.get('myDiv');});再回头看看Element对象，发现什么有趣的东东呢？· Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点。
）；·Element.get()方法提供内置缓存（Cache)，多次访问同一对象效率上有极大优势；·内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。
这意味着你可用少量的代码来做各种各样的事情，这里仅仅是一个简单的例子（完整的列表在Element API 文档中）。
继续在ExtStart.js中，在刚才我们获取好myDiv的位置中加入：myDiv.highlight(); //黄色高亮显示然后渐退myDiv.addClass('red'); // 添加自定义CSS类(在ExtStart.css定义)myDiv.center(); //在视图中将元素居中myDiv.setOpacity(.25); // 使元素半透明获取多个DOM的节点通常情况下，想获取多个DOM的节点，难以依靠ID的方式来获取。
有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。
这种情况下，你就会不用ID来作为获取元素的依据，可能会用属性（attribute）或CSS Classname 代替。
基于以上的原因，Ext引入了一个异常强大的DomSelector库，叫做DomQuery。
DomQuery可作为单独的库使用，但常用于Ext，你可以在上下文环境中（Context）获取多个元素，然后通过Element接口调用。
令人欣喜的是，Element对象本身便有Element.selcect的方法来实现查询，即内部调用DomQuery选取元素。
这个简单的例子中，ExtStart.htm包含若干段落（标签），没有一个是有ID的，而你想轻松地通过一次操作马上获取每一段，全体执行它们的动作，可以这样做：// 每段高亮显示Ext.select('p').highlight(); Element.select在这个例子中的方便性显露无疑。
它返回一个复合元素，能通过元素接口（Element interface）访问每个元素。
这样做的好处是可不用循环和不分别访问每一个元素。
DomQuery的选取参数可以是一段较长的数组，其中包括W3C CSS3 Dom选取器、基本XPatch、HTML属性和更多，请参阅DomQuery API文档以了解这功能强大的库个中细节。
响应事件到这范例为止，我们所写的代码都是放在onReady中，即当页面加载后总会立即执行，功能较单一——这样的话，你便知道，如何响应某个动作或事件来执行你希望做的事情，做法是，先分配一个function，再定义一个event handler事件处理器来响应。
我们由这个简单的范例开始，打开ExtStart.js，编辑下列的代码：Ext.onReady(function(){ Ext.get('myButton').on( 'click', function(){ alert("你单击了按钮"); }); });代码依然会加载好页面后执行，不过重要的区别是，包含alert()的function是已定义好的，但它不会立即地被执行，是分配到按钮的单击事件中。
用浅显的文字解释，就是：获取ID为'myDottom'元素的引用，监听任何发生这个元素上被单击的情况，并分配一个function,以准备任何单击元素的情况。
一般来说，Element.select也能做同样的事情，即作用在获取一组元素上。
下一例中，演示了页面中的某一段落被单击后，便有弹出窗口：Ext.onReady(function(){Ext.select('p').on('c lick', function(){alert( "你单击一段落;");});});这两个例子中，事件处理的function均是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymous function）”，即是没有名的的函数。
你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用。
下一例等效于上一例：Ext.onReady(function(){var paragraphClicked = function(){alert( "You clicked a paragraph"); }Ext.select('p').on('c lick', paragraphClicked); });到目前为止，我们已经知道如何执行某个动作。
但当事件触发时，我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢？要明确这一点非常简单，Element.on方法传入到even handler的function 中（我们这里先讨论第一个参数，不过你应该浏览API文档以了解even handler更多的细节）。
在我们之前的例子中，function是忽略这些参数的，到这里可有少许的改变，——我们在功能上提供了更深层次的控制。
必须先说明的是，这实际上是Ext的事件对象（eventobject）,一个跨浏览器和拥有更多控制的事件的对象。
例如，可以用下列的语句，得到这个事件响应所在的DOM节点：Ext.onReady(function(){var paragraphClicked = function(e){Ext.get(e.target).highlight();}Ext.select('p').on('c lick', paragraphClicked); });注意得到的e.target是DOM节点，所以我们首先将其转换成为EXT的Elemnet元素，然后执行欲完成的事件，这个例子中，我们看见段落是高亮显示的。
使用Widgets(Widget原意为“小器件”，现指页面中UI控件)除了我们已经讨论过的核心JavaScript库，当前的Ext亦包括了一系列的最前端的JavaScirptUI组件库。
文本以一些常用的widget为例子，作简单的介绍。
MessageBox比起略为沉闷的“HelloWolrd”消息窗口，我们做少许变化，前面我们写的代码是，单击某个段落便会高亮显示，现在是单击段落，在消息窗口中显示段落内容出来。
在上面的paragraphClicked的function中，将这行代码：Ext.get(e.target).highlight ();替换为：var paragraph =Ext.get(e.target); paragraph.highlight(); Ext.MessageBox.show({ title: 'Paragraph Clicked',msg: paragraph.dom.innerHTML, width:400,buttons: Ext.MessageBox.OK,animEl: paragraph });这里有些新的概念需要讨论一下。