EXT中文教程.docx

EXT中文教程.docx

《EXT中文教程.docx》由会员分享，可在线阅读，更多相关《EXT中文教程.docx（135页珍藏版）》请在冰豆网上搜索。

EXT中文教程

EXT中文版教程

目录

EXT中文手册1

EXT简介3

目錄3

下载Ext4

开始！

4

Element：

Ext的核心4

获取多个DOM的节点5

响应事件5

使用Widgets7

使用Ajax9

EXT源码概述11

揭示源代码11

发布Ext源码时的一些细节12

我应该从哪里开始？

13

适配器Adapters13

核心Core13

Javascript中的作用域（scope）13

事前准备13

定义13

正式开始14

window对象14

理解作用域15

变量的可见度15

EXT程序规划入门16

事前准备16

需要些什么？

16

applayout.html16

applayout.js17

公开Public、私有Private、特权的Privileged？

19

重写公共变量21

重写（Overriding）公共函数21

DomQuery基础22

DomQuery基础22

扩展EXT组件29

文件的创建30

Let'sgo33

完成35

EXT的布局（Layout）37

简单的例子38

加入内容42

开始使用Grid51

步骤一定义数据（DataDefinition）51

步骤二列模型（ColumnModel）52

Grid组件的简易分页53

Grid数据53

怎么做一个分页的Grid54

分页栏Toolbar55

EXTMenu组件55

创建简易菜单56

各种Item的类型57

Item属性57

在UI中摆放菜单58

Menu的分配方式：

58

练一练60

动态添加菜单按钮到Toolbar61

更方便的是61

下一步是62

模板（Templates）起步62

第一步您的HTML模板62

第二步，将数据加入到模板中62

下一步63

学习利用模板（Templates）的格式化功能63

正式开始63

下一步64

事件处理64

非常基础的例子64

处理函数的作用域64

传递参数65

类设计66

对象创建66

使用构造器函数66

方法共享66

表单组件入门67

表单体67

创建表单字段67

完成表单68

下一步69

为一个表单填充或提交数据69

让我们开始吧69

读取我们的数据71

EXT中的继承71

补充资料73

Ext2概述73

组件模型ComponentModel74

容器模型ContainerModel78

布局Layouts80

Grid82

XTemplate83

DataView84

其它新组件84

EXT2简介85

下载Ext85

开始！

85

Element：

Ext的核心86

获取多个DOM的节点87

响应事件87

使用Widgets88

編輯使用Ajax91

TabPanel基础94

Step1:

创建HTML骨架94

Step2:

Ext结构的构建96

Step3:

创建Tab控制逻辑97

EXT简介

无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。

本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTMLDom。

目錄

∙1下载Ext

∙2开始！

∙3Element：

Ext的核心

∙4获取多个DOM的节点

∙5响应事件

∙6使用Widgets

o6.1MessageBox

o6.2Grid

o6.3还有更多的..

∙7使用Ajax

o7.1PHP

o7.2ASP.Net

o7.3ColdFusion

下载Ext

如果你未曾下载过，那应从这里下载最新版本的Ext。

针对你的下载需求，有几个不同的弹性选项。

通常地，最稳定的版本，是较多人的选择。

下载解包后，那个example文件夹便是一个探索Ext的好地方！

开始！

DownloadExampleFile

∙IntroToExt.zip

我们将使用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!

YouhaveExtconfiguredcorrectly!

"）;

}）;

Element：

Ext的核心

大多数的JavaScript操作都需要先获取页面上的某个元素（reference）,好让你来做些实质性的事情。

传统的JavaScript方法，是通过ID获取Dom节点的：

varmyDiv=document.getElementById（'myDiv'）;

这毫无问题，不过这样单单返回一个对象（DOM节点），用起来并不是太实用和方便。

为了要用那节点干点事情，你还将要手工编写不少的代码；另外，对于不同类型浏览器之间的差异，要你处理起来可真头大了。

进入Ext.element对象。

元素（element）的的确确是Ext的心脏地带，--无论是访问元素（elements）还是完成一些其他动作，都要涉及它。

Element的API是整个Ext库的基础，如果你时间不多，只是想了解Ext中的一两个类的话，Element一定是首选！

由ID获取一个ExtElement如下（首页ExtStart.htm包含一个div，ID名字为“myDiv”，然后，在ExtStart.js中加入下列语句）：

Ext.onReady（function（）{varmyDiv=Ext.get（'myDiv'）;}）;

再回头看看Element对象，发现什么有趣的东东呢？

∙Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点。

）；

∙Element.get（）方法内置缓存处理（Cache），多次访问同一对象效率上有极大优势；

∙内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（add/removeCSSclasses,add/removeeventhandlers,positioning,sizing,animation,drag/drop）。

这意味着你可用少量的代码来做各种各样的事情，这里仅仅是一个简单的例子（完整的列表在ElementAPI中）。

继续在ExtStart.js中，在刚才我们获取好myDiv的位置中加入：

myDiv.highlight（）;//黄色高亮显示然后渐退

myDiv.addClass（'red'）;//添加自定义CSS类（在ExtStart.css定义）

myDiv.center（）;//在视图中将元素居中

myDiv.setOpacity（.25）;//使元素半透明

获取多个DOM的节点

通常情况下，想获取多个DOM的节点，难以依靠ID的方式来获取。

有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。

这种情况下，你就会不用ID来作为获取元素的依据，可能会用属性（attribute）或CSSClassname代替。

基于以上的原因，Ext引入了一个功能异常强大的DomSelector库，叫做DomQuery。

DomQuery可作为单独的库使用，但常用于Ext，你可以在上下文环境中（Context）获取多个元素，然后通过Element接口调用。

令人欣喜的是，Element对象本身便有Element.selcect的方法来实现查询，即内部调用DomQuery选取元素。

这个简单的例子中，ExtStart.htm包含若干段落（

标签），没有一个是有ID的，而你想轻松地通过一次操作马上获取每一段，全体执行它们的动作，可以这样做：

//每段高亮显示

Ext.select（'p'）.highlight（）;

DomQuery的选取参数是一段较长的数组，其中包括W3CCSS3Dom选取器、基本XPatch、HTML属性和更多，请参阅DomQueryAPI文档以了解这功能强大的库个中细节。

响应事件

到这范例为止，我们所写的代码都是放在onReady中，即当页面加载后总会立即执行，功能较单一——这样的话，你便知道，如何响应某个动作或事件来执行你希望做的事情，做法是，先分配一个function，再定义一个eventhandler事件处理器来响应。

我们由这个简单的范例开始，打开ExtStart.js，编辑下列的代码：

Ext.onReady（function（）{

Ext.get（'myButton'）.on（'click',function（）{

alert（"Youclickedthebutton"）;

}）;

}）;

加载好页面，代码依然会执行，不过区别是，包含alert（）的function是已定义好的，但它不会立即地被执行，是分配到按钮的单击事件中。

用浅显的文字解释，就是：

获取ID为'myDottom'元素的引用，监听任何发生这个元素上被单击的情况，并分配一个function,以准备任何单击元素的情况。

正路来说，Element.select也能做同样的事情，即作用在获取一组元素上。

下一例中，演示了页面中的某一段落被单击后，便有弹出窗口：

Ext.onReady（function（）{

Ext.select（'p'）.on（'click',function（）{

alert（"Youclickedaparagraph"）;

}）;

}）;

这两个例子中，事件处理的function均是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymousfunction）”，即是没有名的的函数。

你也可以分配一个有名字的eventhandler,这对于代码的重用或多个事件很有用。

下一例等效于上一例：

Ext.onReady（function（）{

varparagraphClicked=function（）{

alert（"Youclickedaparagraph"）;

}

Ext.select（'p'）.on（'click',paragraphClicked）;

}）;

到目前为止，我们已经知道如何执行某个动作。

但当事件触发时，我们如何得知这个eventhandler执行时是作用在哪一个特定的元素上呢？

要明确这一点非常简单，Element.on方法传入到evenhandler的function中（我们这里先讨论第一个参数，不过你应该浏览API文档以了解evenhandler更多的细节）。

在我们之前的例子中，function是忽略这些参数的，到这里可有少许的改变，——我们在功能上提供了更深层次的控制。

必须先说明的是，这实际上是Ext的事件对象（eventobject）,一个跨浏览器和拥有更多控制的事件的对象。

例如，可以用下列的语句，得到这个事件响应所在的DOM节点：

Ext.onReady（function（）{

varparagraphClicked=function（e）{

Ext.get（e.target）.highlight（）;

}

Ext.select（'p'）.on（'click',paragraphClicked）;

}）;

注意得到的e.target是DOM节点，所以我们首先将其转换成为EXT的Elemnet元素，然后执行欲完成的事件，这个例子中，我们看见段落是高亮显示的。

使用Widgets

（Widget原意为“小器件”，现指页面中UI控件）

除了我们已经讨论过的核心JavaScript库，当前的Ext亦包括了一系列的最前端的JavaScirptUI组件库。

文本以一个常用的widget为例子，作简单的介绍。

MessageBox

比起略为沉闷的“HelloWolrd”消息窗口，我们做少许变化，前面我们写的代码是，单击某个段落便会高亮显示，现在是单击段落，在消息窗口中显示段落内容出来。

在上面的paragraphClicked的function中，将这行代码：

Ext.get（e.target）.highlight（）;

替换为：

varparagraph=Ext.get（e.target）;

paragraph.highlight（）;

Ext.MessageBox.show（{

title:

'ParagraphClicked',

msg:

paragraph.dom.innerHTML,

width:

400,

buttons:

Ext.MessageBox.OK,

animEl:

paragraph

}）;

这里有些新的概念需要讨论一下。

在第一行中我们创建了一个局部变量（LocalVariable）来保存某个元素的引用，即被单击的那个DOM节点（本例中，DOM节点指的是段落paragrah,事因我们已经定义该事件与

标签发生关联的了）。

为什么要这样做呢？

嗯...观察上面的代码，我们需要引用同一元素来高亮显示，在MessageBox中也是引用同一元素作为参数使用。

一般来说，多次重复使用同一值（Value）或对象，是一个不好的方式，所以，作为一个具备良好OO思维的开发者，应该是将其分配到一个局部变量中，反复使用这变量！

现在，为了我们接下来阐述新概念的演示，请观察MessageBox的调用。

乍一看，这像一连串的参数传入到方法中，但仔细看，这是一个非常特别的语法。

实际上，传入到MessageBox.show的只有一个参数：

一个Objectliteral,包含一组属性和属性值。

在Javascript中，ObjectLiteral是动态的，你可在任何时候用{和}创建一个典型的对象（object）。

其中的字符由一系列的name/value组成的属性，属性的格式是[propertyname]:

[propertyvalue]。

在整个Ext中，你将会经常遇到这种语法，因此你应该马上消化并吸收这个知识点！

使用ObjectLiteral的原因是什么呢？

主要的原因是“可伸缩性（flexibility）”的考虑"，随时可新增、删除属性，亦可不管顺序地插入。

而方法不需要改变。

这也是多个参数的情况下，为最终开发者带来不少的方便（本例中的MessageBox.show（））。

例如，我们说这儿的foo.action方法，有四个参数，而只有一个是你必须传入的。

本例中，你想像中的代码可能会是这样的foo.action（null,null,null,'hello'）.,若果那方法用ObjectLiteral来写，却是这样，foo.action（{param4:

'hello'}），这更易用和易读。

Grid

Grid是Ext中人们最想先睹为快的和最为流行Widgets之一。

好，让我们看看怎么轻松地创建一个Grid并运行。

用下列代码替换ExtStart.js中全部语句：

Ext.onReady（function（）{

varmyData=[

['Apple',29.89,0.24,0.81,'9/112:

00am'],

['Ext',83.81,0.28,0.34,'9/1212:

00am'],

['Google',71.72,0.02,0.03,'10/112:

00am'],

['Microsoft',52.55,0.01,0.02,'7/412:

00am'],

['Yahoo!

',29.01,0.42,1.47,'5/2212:

00am']

];

vards=newExt.data.Store（{

proxy:

newExt.data.MemoryProxy（myData）,

reader:

newExt.data.ArrayReader（{id:

0},[

{name:

'company'},

{name:

'price',type:

'float'},

{name:

'change',type:

'float'},

{name:

'pctChange',type:

'float'},

{name:

'lastChange',type:

'date',dateFormat:

'n/jh:

ia'}

]）

}）;

ds.load（）;

varcolModel=newExt.grid.ColumnModel（[

{header:

"Company",width:

120,sortable:

true,dataIndex:

'company'},

{header:

"Price",width:

90,sortable:

true,dataIndex:

'price'},

{header:

"Change",width:

90,sortable:

true,dataIndex:

'change'},

{header:

"%Change",width:

90,sortable:

true,dataIndex:

'pctChange'},

{header:

"LastUpdated",width:

120,sortable:

true,

renderer:

Ext.util.Format.dateRenderer（'m/d/Y'）,dataIndex:

'lastChange'}

]）;

vargrid=newExt.grid.Grid（'grid-example',{ds:

ds,cm:

colModel}）;

grid.render（）;

grid.getSelectionModel（）.selectFirstRow（）;

}）;

这看上去很复杂，但实际上加起来，只有七行代码。

第一行创建数组并作为数据源。

实际案例中，你很可能从数据库、或者WebService那里得到动态的数据。

接着，我们创建并加载datastore，datastore将会告诉Ext的底层库接手处理和格式化这些数据。

接着，我们定义一个column模型，用来轻松地调配Grid的每一列参数。

最后我们生成这个Grid,传入datastore和column模型两个对象，进行渲染并选好第一行。

不是太困难吧？

如果一切顺利，完成之后你会看到像这样的：

当然，你可能未掌握这段代码的某些细节（像MemoryProxy究竟是什么？

）但先不要紧，这个例子的目的是告诉你，用少量的代码，创建一个富界面的多功能的UI组件而已——这是完全可能的，只要读者您有兴趣学习。

这儿有许多学习Grid的资源。

ExtGrid教程、交叉Gird演示和GridAPI文档。

还有更多的..

这只是冰山一角。

还有一打的UIWidgets可以供调用，如layouts,tabs,menus,toolbars,dialogs,treeview等等。

请参阅API文档中范例演示。

使用Ajax

在弄好一些页面后，你已经懂得在页面和脚本之间的交互原理（interact）。

接下来，你应该掌握的是，怎样与远程服务器（remoteserver）交换数据，常见的是从数据库加载数据（load）或是保存数据（save）到数据库中。

通过JavaScript异步无刷新交换数据的这种方式，就是所谓的Ajax。

Ext内建卓越的Ajax支持，例如，一个普遍的用户操作就是，异步发送一些东西到服务器，然后，UI元素根据回应（Response）作出更新。

这是一个包含textinput的表单，一个div用于显示消息（注意，你可以在ExtStart.html中加入下列代码，但这必须要访问服务器）：

hidden">