EXT js 中文手册

合集下载

ExtJS 4 官方指南：数据 Data 简体中文版

ExtJS 4 官方指南翻译：数据Data 数据包加载并保存您的应用程序中的所有数据。

它包括41类，但其中有三个，比其他的都, Store和有些支持的卫星类：1模型和存储Models and Stores让我们看看怎么创建一个Model：Ext.define('User',{extend:'Ext.data.Model',fields:[{ name:'id', type:'int'},{ name:'name', type:'string'}]});Models通常会用到Store，Store基本上是Models实例的一个集合。

建立一个Store和加载其数据很简单：Models are typically used with a Store, which is basically a collection of Model instances. Setting up a Store and loading its data is simple:Ext.create('Ext.data.Store',{model:'User',proxy:{type:'ajax',url :'users.json',reader:'json'},autoLoad:true});我们配置Store使用Ajax Proxy，告诉它加载数据的URL，并用一个Reader解析数据。

在这种情况下，我们的服务器返回JSON，所以我们创建一个JSON Reader来读取响应。

Store 从URL users.json中自动加载User model实例集合。

users.json URL应该返回一个JSON 字符串，看起来像这样：We configured our Store to use an Ajax Proxy, telling it the url to load data from andthe Reader used to decode the data. In this case our server is returning JSON, so we've set up a Json Reader to read the response. The store auto-loads a set of User model instances from the url users.json. The users.json url should return a JSON string that looks something like this:{success:true,users:[{ id:1, name:'Ed'},{ id:2, name:'Tommy'}]}Simple Store例子里有现场演示。

Extjs的简单使用手册

stringiddom节点extelement返回一个节点extgetdomid值选择符一元素选择符extselectdivspan搜索所有div下的所有span元素extselectdivspan搜索所有div下直系子元素的span元素extselectdivspan搜索在div两侧出现的span元素选择符二属性选择符eftest表示搜索所有拥有f的属性并且属性值为test的e元素在jquery中test两侧必须带或extselecttrref
• Ext.clearOpacity() 清楚透明度设置
– Ext.fly(‘test1’).clearOpacity();
DOM的游历
• • • • • • • • • • • • • Ext.is() 传入参数与当前是否一致
– Ext.fly(‘test1’).is(‘div.abc’)。
Ext.findParent() 从当前节点为起点，查找外围节点，并返回该节点。 Ext.findParentNode() 从当前节点的父节点为起点，查找外围节点，并返回该节点。 Ext.up() 从当前节点开始，向上寻找“父父”节点
• E[f*=test]表示搜索所有拥有f的属性并且属性值包含test的E元素
– Ext.select(‘tr[ref*=Myfield/货物清单]’)；
• E[f%=2]表示搜索所有拥有f的属性并且属性值能被2整除的E元素
– Ext.select(‘tr[ref%=2]’)；
• E[f!=test]表示搜索所有拥有f的属性并且属性值不为test的E元素
– Ext.select(‘div:not(div.test)’);//摒除样式类为test的所有div元素集合
• E:has(S) E元素集合为包含与S匹配的所有元素的集合 • E:next(S) 下一个侧边元素与S匹配相符合的元素 • E:prev(S) 上一个侧边元素与S匹配相符合的元素

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支持将数据与组件进行绑定，以实现动态数据的展示和交互。

通过设置数据模型和绑定关系，可以在数据更新时自动更新组件的显示内容。

EXT中文手册7

为一个表单填充或提交数据这个教程使用了在表单入门教程中使用过的雇员信息编辑表单。

如果你仍然不熟悉如何创建一个表单，你可以首先看一下这个例子。

我建议下载用于这个例子的一段程序，这样可能对你有一些帮助。

你也可以找一个有效的例子。

我们将经历使用表单的整个过程，从最初的从服务器获取数据填入表单，到将数据返回给服务器。

在后端我使用PHP和MySQL, 然而这个例子对于PHP和MySQL来说并不是特殊的，而是只要求你能够从你的服务器读取和输出JSON数据。

让我们开始吧首先我们必须设置表单的url, 这是一个能获得POST数据并将其写进我们的数据库的PHP脚本.我们的数据包含5个字段：id, name, title, hire_date和active,这些字段可以被取回并放置到一个数据存储对象（Store）中。

以下的程序构造了一个数据存储对象，在这个时候没有数据被取回，我们的数据代理（Proxy）对象提交到一个PHP脚本，用来取回数据库id为14的行并将它转换成一个JSON字符串。

employee_data = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),reader: new Ext.data.JsonReader({},[ 'id', 'name', 'title', 'hire_date', 'active']),remoteSort: false});接下来要做的是设定我们的事件监听者来监察什么时候数据被载入，这个将保证我们不会在数据被载入之前填入表单。

当数据被载入后，我们可以取回数据并用setV alue方法将其填入表单。

这里我们用getAt(0) 从我们的数据存储对象里重新取回第一行数据（行zero）。

EXTJS中文手册

Ext.onReady(function(){
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节点：

extJS4.x中文API学习教程

Extjs4 学习指南（仅供学习使用、转载需注明出处）Extjs4可用的学习资料少之又少，本文内容大部分为网络整理、方便学习者使用，如有出入以extjs4 api文档为准。

Extjs初步获取Extjs下载extjs：可以从/ 获得需要的extjs发布包及更多支持。

搭建学习环境：假设您的机器已经安装myeclipse和tomcat，如果没有请参阅其他相关资料。

myeclipse建立新Web project项目Extjs4并且将extjs4.0.7压缩包解压后的全部文件复制到项目的Webroot目录下Examples目录为ext官方提供的例子程序，其中可能包涵php的代码，错误信息可以暂时不理会。

部署并且启动tomcat，测试环境是否可用。

打开浏览器，输入http://localhost:8080/Ext4/index.html假设您的tomcat端口为8080您会看到以下界面，证明环境已经搭建成功！查看api文档http://localhost:8080/Ext4/docs/index.html查看示例页面http://localhost:8080/Ext4/examples/index.html 测试例子开始...Html文件中只引入了一个css和2个js文件，注意引用路径和你建立文件路径是否能匹配，如果路径没有问题的话，打开浏览器输入http://localhost:8080/Ext4/helloworld.html您将会看到浏览器里显示一个panel，标题是Hello Ext,内容Hello! Welcome to Ext JS.，如果没有，请查看是否有路径不匹配。

其他：在ExtJS里最常用的,应该就是Ext.onReady和Ext.application这两个个方法了,而且它也可能是你学习ExtJS所接触的第一个方法,这个方法在当前的DOM加载完毕后自动调用,保证页面内的所有元素都能被Script所引用.可以尝试在这个方法中添加一条语句,看看页面打开后是什么反映（先建立js和html文件，将如下代码加入js文件中，html文件相应引入对应的js文件，本获取元素还有一个常用的方法,就是获取页面上的元素了,ExtJS提供了一个get方法,可以根据ID取到页面上的元素:var myDiv = Ext.get('myDiv');会取到页面上ID为'myDiv'的元素.如果使用Element.dom的方法,则可以直接操作底层的DOM节点,Ext.get返回的则是一个Element对象.在不能使用这种方式来获取多个DOM的节点,或是要获取一些ID不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的标签,则可以使用:var ps = Ext.select('p');这样你就可以对所要获取的元素进行操作了,select()方法返回的是positeElement对上,如:ps.highlight();或是:Ext.select('p').highlight();当然,select参数还可以更复杂一些,其中可以包括W3C Css3Dom选取器,基本的XPath,HTML 属性等,详细情况,可以查看DomQuery API的文档,来了解细节.事件响应获取到了元素,则可能会对一些元素的事件进行一些处理,比如获取一个按钮,我们为它添加一个单击事件的响应:当然,你可以把事件的响应加到通过select()方法获取到的元素上:});WidgetsExtJS还提供了丰富的UI库来供大家使用.Extjs4布局详解Fit布局在Fit布局中，子元素将自动填满整个父容器。

ExtJS 4 官方指南翻译：Drag and Drop 拖放简体中文版

ExtJS 4 官方指南翻译：Drag and Drop 拖放分类：ExtJS 4.02011-10-26 17:03 454人阅读评论(0) 收藏举报原文：/ext-js/4-0/#!/guide/drag_and_drop翻译：frank/sp42 转载请保留本页信息1 拖放Drag and Drop在那么多的交互设计模式之中，“拖放（Drag andDrop）”模式可以说是开发者感觉比较不错的。

用户日常在进行拖放操作的时候，真的是连“想都不用想”地就可以进行拖放操作了，非常直观而且易学易用。

下文中的教程中，请跟随我们。

不是我们“大厥其词”，而是真的——只要将下面五个步骤的要义领会在心，拖放的话将不再是一件难事。

One of the most powerful interaction design patterns available to developers is "Drag and Drop." We utilize Drag and Drop without really giving it much thought - especially when its done right. Here are 5 easy steps to ensure an elegant implementation.2 拖放的定义Defining drag and drop拖动（drag）动作的发生，就是鼠标在某些UI 元素身上点击了，然后按着不放鼠标，进行鼠标移动的动作；放下（drop，或者称“置下”）动作的发生，就是拖动开始后，鼠标按钮松开了——也就是放下的动作。

宏观而言，拖放两者的操作可用下面的流程图来描述。

A drag operation, essentially, is a click gesture on some UI element while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation. From a high level, drag and drop decisions can be summed up by the following flow chart.ExtJS本身就提供了Ext.dd以实现拖放的支持。

EXT_JS实用开发指南

EXTJS实用开发指南1、要使用ExtJS 框架的页面中一般包括下面几句：<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script>Ext.BLANK_IMAGE_URL = '../../js/ext2/resources/images/default/tree/s.gif';在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，因此可以用，一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的，使用ExtJS 应用，程序的代码大致如下：<script>function fn(){alert(“ExtJS库已加”);}Ext.onReady(fn);</script>2、A：fn 也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：<script>Ext.onReady(function (){alert(“ExtJS库已加载!”);});</script>B：进一步，我们可以在页面上显示一个窗口，代码如下：<script>Ext.onReady(function(){Varwin=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjfopen source</h1>'});//参数是"标题,宽度,高度,html文本"win.show();});</script>3、ExtJS 的类库由以下几部分组成：底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。

ExtJS快速入门指南

ExtJS快速入门指南一、ExtJS框架简介 (1)二、如何使用Ext (2)三、Ext组件 (3)1、组件简介 (3)2、组件XType (4)3、组件应用 (4)4、组件配置选项 (5)5、组件属性 (6)6、组件方法 (6)四、事件及事件响应 (7)五、Component及Container简介 (10)1、ponent (10)2、tainer (10)六、面板Ext.Panel (11)面板Panel简介 (11)面板内容 (12)面板与DOM节点DIV (13)七、ViewPort (14)八、窗口Window (17)九、对话框 (18)十、TabPanel (22)十一、布局 (26)十二、表格Grid (29)十三、TreePanel (30)十四、表单Form (32)十五、理解Html DOM、Ext Element及Component (34)十六、Ext类中的get方法简介 (35)十七、如何学习及掌握Ext (37)一、ExtJS框架简介ExtJS也就是Ext框架，官方网址为，ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。

ExtJS可以用来开发RIA(Rich Internet Application，富互联网应用系统)的开源AJAX应用框架，使用的开源协议是GPL。

ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJs最开始基于UI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

二、如何使用Ext首先从ext官方网站下载ext的sdk，把sdk拷到web应用程序目录，然后即可在web 页面中直接通过<script>标签引入ext的库文件，就可以使用javascript调用ext的各种控件。

ExtJS 4 官方指南：类系统简体中文版

Ext JS 4类系统在历史上第一次，Ext JS的经历了一个在基础上的巨大重构，这就是新的类系统。

新架构的基础几乎每一个都是建立在Ext JS4.x写单个类上，因此在开始编码之前理解这个类系统是很重要的。

本手册适用于任何希望创造新的或扩大在现有的Ext JS 4.x类的开发者。

它分为4个部分：∙第一节：“概述”解释为什么需要一个强大的类系统∙第二节：“命名约定”讨论命名类，方法，属性，变量和文件的最佳做法。

∙第三节：“实践”提供了详细的一步一步的代码示例∙第四节：“错误的处理和调试”提供有用的提示和技巧，如何处理异常1概述Ext JS4有300多个类。

我们有超过20万开发者的巨大社区，他们来自世界各地，有各种编程背景。

在这种规模的框架中，我们面对的一个巨大挑战就是提供一个共同的代码架构。

这个架构要求：∙熟悉和简单易学∙能快速开发，调试方便，无痛部署∙精心组织，可扩展性和可维护性JavaScript是一个没有类的，原型为导向（prototype-oriented）的语言。

因此，JavaScript语言本质上最强大的功能之一是灵活性。

它可以使用许多不同的编码风格和技巧，以许多不同的方式做同样的工作。

然而，该功能也是不可预知的成本。

如果没有一个统一的结构，JavaScript代码会真的很难理解，维护和再利用。

另一方面，基于类（Class-based）编程，仍然停留OOP的最流行的模式。

基于类的语言，通常需要强类型，提供封装，标准的编码约定。

通常使得开发者坚持一个大原则，编写的代码更可能是可预见的、可延伸和可扩展的。

然而，他们却不具有JavaScript这样的语言的动态能力。

每种方法都有其自身的利弊，我们能否对各方都去其糟粕，取其精华？答案是肯定的，我们已经在Ext JS 4的解决方案中实现了。

2命名约定使用一致的命名约定作为所有类的代码基础，而命名空间和文件名有助于保持你的代码的组织，结构化和可读性。

Extjs教程_第一章_起步

第一章起步在这章里，我们将介绍ExtJS的基本功能。

如果你对web开发熟悉的话，您会惊诧于ExtJS框架的优雅！不同其他的JavaScript库，ExtJS为您的开发夯实了基础，只需几行代码，你就可以制作出丰富的用户界面。

本章包括：1. ExtJS的功能和您将会喜爱上它的原因；2. 如何获得Ext并在web应用中采用它；3. 采用”适配器(adapters)“使得Ext和其他的JavaScript库共存；4. 充分利用AJAX技术；5. 在您的语言中展示ExtJS对象；关于Ext：我们采用最新的的Ext 2.x版本，1.x版本到2.x版本的是一个重组的过程，包括添加新的组件、重命名组件用来重新组织结构等等。

这使得1.x和2.x兼容性很低。

3.x 版本则不然，他对2.x有很强的兼容性，可以很好的联合本书中所设计的内容。

Ext的开发组决定在日后的版本发布中都做到向前兼容。

Ext库是对雅虎YUI的一个拓展，提供了它所不支持的特性：良好的API，真实的控件。

虽然YUI致力于用户界面，但是它却没有提供许多有用的功能。

Ext的产生源自于开发者、开源贡献者们将YUI扩展成一个强大的客户端应用程序库的努力。

Ext提供了一个简单丰富的用户界面，如同桌面程序一般。

这使得开发者能够把精力更多的转移到实现应用的功能上。

Ext官网上的示例会让你知道它是如何的不可思议：/deploy/dev/examples/。

其中最引人注目的一个例子就是Feed Viewer，它展示了Ext.However提供的多种特性，对于学习来说它可能太复杂了，所以现在只需你感受它带给你的精彩。

另外一个精彩的例子就是Simple Task任务跟踪程序，它加载了Google Gears的数据库。

Ext: 不仅仅是另一个JS库：Ext不仅仅是另一个JS库，实际上它可以通过适配器（adapter）和其它JS库一起工作。

我们将在本章的稍后来介绍适配器。

通常来说，我们使用Ext的目的是满足高层次的用户交互——要比我们传统概念上的站点交互性更强。

ExtJS 4 官方指南翻译：组件

ExtJS 4 官方指南翻译：组件ComponentsExtJS程序由不同的器件所组成，器件也称作“组件”。

所有组件皆是ponent其子类，目的在于能够参与生存周期的自动化管理，包括实例化、渲染、大小调整与定位、销毁的问题。

ExtJS不但直接提供了一个广阔且实用的组件模型，而且使得任意组件都可以轻松地扩展出新的组件。

An Ext JS application's UI is made up of one or many widgets called Component s. All Components are subclasses of the ponent class which allows them to participate in automated lifecycle management including instantiation, rendering, sizing and positioning, and destruction. Ext JS provides a wide range of useful Components out of the box, and any Component can easily be extended to create a customized Component.1 组件层次The Component Hierarchy容器是组件的一种特殊类型，用于承载其他组件之用。

一个典型的应用程序是由若干嵌套的组件而成，这有点像树状的结构。

容器负责管理子组件的生存周期，包括实例化、渲染、大小调整与定位、销毁的问题。

一个典型的组件层次以“视口Viewport ”为顶点，然后其他的容器或者组件嵌套于内：A Container is a special type of Component that can contain other Components. A typical application is made up of many nested Components in a tree-like structure that is referred to as the Component hierarchy. Containers are responsible for managing the Component lifecycle of their children, which includes creation, rendering, sizing and positioning, and destruction. A typical application's Component hierarchy starts with a Viewport at the top, which has other Containers and/or Components nested within it:可以通过容器的items 配置项来添加容器的子组件。

ext入门手册

ext入门手册Ext JS 学习笔记目录1开始EXTJS (1)1.1获取EXTJS (1)1.2应用EXTJS (1)1.3演示H ELLO W ORD (2)2组件的介绍和应用 (3)2.1介绍 (3)2.2应用 (5)2.2.1简单示例 (5)2.3组件详解 (7)2.3.1EXT.Panel (7)2.3.2布局控件 (9)2.3.3表格控件 (13)2.3.4树形控件 (15)2.3.5表单控件Form (19)2.3.6弹出窗口 (22)3EXT核心 (28)3.1E XT.E LEMENT (28)3.2CSS样式操作 (30)3.1DOM操作 (31)3.1A JAX介绍 (36)1开始extjs1.1获取extjs要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址/doc/3d9942416.html/download，把下载得到的ZIP压缩文件解压可以看到如下目录和文件1.2应用extjs应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。

因此，要使用ExtJS框架的页面中一般包括下面几句：<="" bdsfid="99" p="" rel="stylesheet" type="text/css"/> href="extjs/resources/css/ext-all.css" />在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady 中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：1.3演示HelloWord<="" bdsfid="123" p="" rel="stylesheet" type="text/css"/> href="extjs/resources/css/ext-all.css" />2组件的介绍和应用2.1介绍组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。

EXT_JS入门详解

EXT_JS入门详解第二章、开始ExtJS2.1获得ExtJSadapter：负责将里面提供第三方底层库（包括Ext 自带的底层库）映射为Ext 所支持的底层库。

build：压缩后的ext 全部源码(里面分类存放)。

docs： API 帮助文档。

exmaples：提供使用ExtJs 技术做出的小实例。

resources：Ext UI 资源文件目录，如CSS、图片文件都存放在这里面。

source：无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU （LGPL）开源的协议。

Ext-all.js：压缩后的Ext 全部源码。

ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。

ext-core.js：压缩后的Ext 的核心组件，包括sources/core 下的所有类。

ext-core-debug.js：无压缩Ext 的核心组件，包括sources/core 下的所有类。

2.2应用ExtJS应用extjs 需要在页面中引入extjs 的样式及extjs 库文件，样式文件为resources/css/extall.css，extjs 的js 库文件主要包含两个，adapter/ext/ext-base.js 及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js 是extjs 的核心库。

adapter 表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js 换成adapter/jquery/ext-jquery-adapter.js ，或adapter/prototype/ext-prototype-adapter.js 等。

因此，要使用ExtJS 框架的页面中一般包括下面几句：在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，因此可以用，一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的，第三章Ext框架基础及核心简介3.1Ext类库简介ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中通过javascript 调用ExtJS 的类及控件来实现需要的功能。

ExtJs中文教程

EXT中文手册6

注意：留意几种不同的方法加入子菜单！还有even handing函数和Coloritem、DataMenu匿名函数之间的区别。

练一练Ok我们用上述的方法，创建了toolbar和menu，看起来应该是这样的：上文提及menu可摆放在UI的任何位置，这里将为你演示menu如何与Toolbars、MeneuButtons、Context Menus's配合工作，包括一些有用的方法和动态添加的功能。

MenuButton这条Toolbar有两个按钮。

一个分隔符，和一个纯图标的按钮（附Quicktips）。

你可尝试这样做，把zip文件中.gif加入一些代码片段，有助你提高效率，留意注释！现在你已经了解菜单组件是如何工作了。

下面的资源有助您进一步更深入学习菜单：模板（Templates）起步首先建议读者先下载本例的代码，以配合文本的说明。

有效的例子在这里。

第一步您的HTML模板第一个步骤没有任何特别，这里的HTML可以说是用来格式化你的数据。

花括号里面的关键字就是你数据中的{id},{url} 和{text}的容器（placeholder）。

或者用纯数字{0},{1},{2}来表示,但是关键字的命名第二步，将数据加入到模板中这里我们将使用append方法加入两行的数据。

正如你所见，元素的“id”、“url”和“text”相对应于上述模板的容器。

这就是模板的基本知识点，对于你来这说非常简单吧？下一步如果你想换个地方，文档区便是一个绝佳的好地方。

看看范例Feed V iewer，里面就大量使用了模板。

学习利用模板（Templates）的格式化功能本教程基于Ext的模板引擎展开详述，亦是对Shea Frederick“模板入门”教程一文的补充。

假设读者已经初步接触过模板（Templates）,和格式化函数的基本语法为“{V ARIABLE:[(可选的参数)]}”。

正式开始假设我们打算从一变量中，打印出内容，但当中的内容有可能会占用过多的空间。

Extjs教程_第三章_表单

第三章表单在这章里，我们将学习Ext表单(forms)。

它和HTML的表单相似，但却没有约束和枯燥的界面。

我们用不同的表单字段类型来生成一个表单，而且它的验证和提交过程是异步的。

然后我们会制作数据库驱动的下拉菜单，即ComboBox，然后添加复杂的字段验证和mask（相当于一种掩码）。

然后我们再进行进一步的改进，为其添加一系列的令人啧啧的功能。

本章的目的包括：∙制作一个靠AJAX提交的表格；∙检验字段数据并建立常用验证；∙从数据库中加载表格。

表单的主要组件：Ext的表单蕴含了无穷无尽的可能。

按键监听、检验、错误信息、输入约束都在配置项里有支持。

扩展表单的配置以达到你的需要是十分容易的，这在本章中会做相应介绍。

接下来介绍一些表单的核心组件：∙Ext.form.FormPanel：有点像传统HTML的表单，它是一个结合了很多字段的面板；∙Ext.form.Field：他是表单中主要的元素，用来和用户交互，也是很多字段的基础，可以拿它和HTML中的INPUT标签来做类比。

我们的第一个表单：为了开始，让我们先做一个集合了各种字段类型的表单：一个日期选择器、校验、错误信息和AJAX提交——放心，对于我们第一尝试来讲，这个表单并不复杂。

在这个示例里，我们通过配置对象来建立字段，而不是通过去实例化一个Ext.form.Field组件。

这种方法很好，可以节约很多时间，也能让代码运行更快。

前面示例中饿HTML页面可以做本示例的开始（你可以免去很多引入Ext库的工作）。

Ext 库文件一定要被正确引入，Ext的代码要放在onReady函数中。

Ext.onReady(function(){var movie_form = new Ext.FormPanel({url: 'movie-form-submit.php',renderTo: document.body,frame: true,title: 'Movie Information Form',width: 250,items: [{xtype: 'textfield',fieldLabel: 'Title',name: 'title'},{xtype: 'textfield',fieldLabel: 'Director',name: 'director'},{xtype: 'datefield',fieldLabel: 'Released',name: 'released'}]});});当我们在浏览器中运行上面的代码，会出现一个如下的表单面板：好表单——它是怎么工作的？这个FormPanel和HTML表单很相似。

Ext官方中文教程列表

Ext官方中文教程列表特别鸣谢：Ext中文站整理、维护注意：转载文章,请保留原始链接和署名入门:Tutorial:EXT简介/learn/Tutorial:Introduction_to_Ext_2.0_(Chinese)Tutorial:Ext 2简述/learn/Ext_2_Overview_(Chinese)Tutorial:EXT新手建议/learn/Tutorial:EXT新手建议Tutorial:怎么轻松地进入Ext的世界?/learn/Tutorial:Playing_With_Ext_The_Easy_Way_(Chinese)Tutorial:Javascript中的作用域（scope）是什么?(一)/learn/Tutorial:What_is_that_Scope_all_about_(Chinese)Tutorial:Javascript中的作用域（scope）是什么?(二)/learn/What_is_that_Scope_all_about2_(Chinese)Manual:Ext源码概述/learn/Manual:Ext_Source_Overview_(Chinese)Manual:Ext与RESTful Web Services/learn/Manual:RESTful_Web_Services_(Chinese)程序设计:Tutorial:如何合理地规划一个应用程序/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)Tutorial:如何本地化ext的教程/learn/Tutorial:Localizing_Ext_(Chinese)Tutorial:xtype的含义/learn/Tutorial:Xtype_defined_(Chinese)Tutorial:扩展Ext中的组件/learn/Manual:Component:Extending_Ext_Components(Chinese)Tutorial:扩展与插件之间的区别/learn/Manual:Component:Extension_or_Plugin_zh-CNTutorial:Ext组件的复用/learn/Manual:Component:Extending_Ext_Components(Chinese)Tutorial:从源码生成Ext/learn/Tutorial:Building_Ext_From_Source_(Chinese)基础用法:Tutorial:DomQuery基础/learn/Tutorial:DomQuery_Basics(Chinese)Tutorial:Ext中的事件/learn/Tutorial:Events_Explained_(Chinese)Tutorial:简述模板/learn/Tutorial:Getting_Started_with_Templates_(Chinese)Tutorial:模板（Templates）的函数/learn/Tutorial:Utilizing_Format_Features_of_Templates_(Chin ese)Manual:事件的处理/learn/Manual:Intro:Event_Handling_cnManual:Ext中的继承/learn/Manual:Intro:Inheritance_(Chinese)Manual:Ext的类设计/learn/Manual:Intro:Class_Design_cnManual:Ajax通讯/learn/Manual:Core:Ext.Ajax_(Chinese)Manual:JSON处理方法/learn/Manual:Core:Working_with_JSON_(Chinese)Manual:函数的原型扩展/learn/Manual:Utilities:Function_(Chinese)组件的使用:Tutorial:Tab标签页/learn/Tutorial:TabPanel_Basics_(Chinese)Tutorial:Ext 1.x中的布局/learn/Tutorial:Using_Layouts_with_Ext_-_Part_1_(Chinese)Tutorial:Grid组件初学/learn/Tutorial:Beginning_Using_the_Grid_Component_(Chinese)Tutorial:Grid的数据分页/learn/Tutorial:Basics_of_Paging_With_the_Grid_Component_(Ch inese)Tutorial:Ext菜单器件/learn/Tutorial:Ext_Menu_Widget_(Chinese)Tutorial:表单组件初学/learn/Tutorial:Getting_Started_with_Forms_(Chinese)Tutorial:表单组件初学(二)/learn/Tutorial:Loading_Data_Into_and_Submitting_a_Form_(Chi nese)Manual:Cookie的存储/learn/Manual:Core:State_(Chinese)YUI-Ext(Ext前身)的相关文章Tutorial:EXT新手建议：建立自己的工具箱（Toolkit）/learn/Tutorial:EXT新手建议Tutorial:如何用YUI轻松做JavaScript动画/learn/Tutorial:如何用YUI轻松做JavaScript动画Tutorial:轻松三步，搞掂内存泄漏/learn/Tutorial:轻松三步，搞掂内存泄漏Tutorial:用YUI-EXT创建Ajax Feed-viewer/learn/Tutorial:用YUI-EXT创建Ajax_Feed-viewerTutorial:使用DomHelper 创建元素的DOM、HTML片断和模版/learn/Tutorial:使用DomHelper 创建元素的DOM、HTML片断和模版Tutorial:EXT设计模式初学习/learn/Tutorial:EXT设计模式初学习Tutorial:预览：增强版的拖放和新增的TreePanel/learn/Tutorial:预览_：增强版的拖放和新增的TreePanelTutorial:创建一个可复用的AJAX对话框--一个完成好的例子/learn/Tutorial:创建一个可复用的AJAX对话框--一个完成好的例子Tutorial:创建YUI的Grid/learn/Tutorial:创建YUI的GridTutorial:Grid 调用远程数据/learn/Tutorial:Grid 调用远程数据Tutorial:为Yahoo! UI Extensions Grid增加内置的可编辑器/learn/Tutorial:为Yahoo! UI Extensions Grid增加内置的可编辑器Tutorial:Ext.MasterTemplates 入手/learn/Tutorial:Ext.MasterTemplates 入手Tutorial:像了解爱人一样了解ExtJs/learn/Tutorial:像了解爱人一样了解ExtJsTutorial:JSON和浏览器安全/learn/Tutorial:JSON和浏览器安全Tutorial:JavaScript的一种模组模式/learn/Tutorial:JavaScript的一种模组模式Tutorial:关于JavaScript的貌似类（pseudo-classes）－－－－不吐不快/learn/Tutorial:关于JavaScript的貌似类（pseudo-classes）－－－－不吐不快Tutorial:Application Layout 程式開發入門介紹/learn/Tutorial:Application Layout 程式開發入門介紹Tutorial:如何建立一個可以Disable/Editable的Editor gird/learn/Tutorial:如何建立一個可以Disable/Editable的Editor gird。