ext入门必学

EXT学习文档

ext-1.1

部分原创/部分整理

第一章 EXT入门

1.1 Ext简介

Ext在最开始的时候，是作为YUI的一个扩展存在的，所以那个时候它的名称是YUI.Ext，后来，Ext作为一个独立的项目进行开发，并不再依赖于YUI。适合企业级开发，能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid，有完整地说明文档。

1.2 下载Ext

如果你未曾下载过，那应从这里下载最新版本的Ext https://www.360docs.net/doc/e1670658.html,/downloads。针对你的下载需求，有几个不同的版本。通常地，最稳定的版本，是较多人的选择。最新的版本是Ext2.0，本教程使用ext-1.1版本。

下载解包后，我们可以查阅ext目录下的docs中的文档配合example下是些实例文件进行学习。在EXT目录中，package目录是ext所有类库文件,在ext-all.js文件中已经包含了该目录下所有的类。因此我们开发中只需要导入ext-all.js文件即可。Resources目录下有Ext所需要的图片文件和CSS样式文件。对于样式文件我们只用到ext-all.css一个文件即可，它包含了所有Ext中样式的定义。在样式文件夹中还有三个Ext主题样式文件xtheme-aero.css、xtheme-gray.css、xtheme-vista.css，我们可以选择自己喜欢的Ext风格，在今后我们会详细讲到。

1.3 第一个例子

我们开始第一个例子，可以帮助你了解Ext的开发。

（1）首先我们建立项目目录，如C:\example1。

（2）在example1目录下建立js和css两个目录，用于存放JS文件和CSS样式文件。

（3）为了节省空间我们只把需要的文件拷贝到项目中：

将EXT目录中resources\css\目录下的ext-all.css、xtheme-aero.css、xtheme-gray.css、xtheme-vista.css 文件拷贝到项目中CSS目录下。

将EXT目录中ext-all.js文件和adapter\ext\ext-base.js文件拷贝到项目中JS目录下。

拷贝EXT目录resources\中的images目录全部拷贝至项目目录中。

开发所必要的文件已经拷贝到项目中啦，以上导入操作今后不再提示。

接下来该编写代码来实现功能啦.Go...

（4）在js目录下新建hello.js,内容是：

Ext.onReady(function() {

Ext.get('mb1').on('click', function(e){

Ext.MessageBox.alert('提示', '你好，中国');

});

});

（5）在根目录建立hello.htm,内容是：

我们双击打开hello.htm页面，单击"点击我"按钮，你可以看弹出对话筐，效果如下：

Ext的界面很漂亮，可以替换传统的Alert(),我们分析以上代码。

先看hello.js文件,文件中Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加载完毕后，保证页面内的所有元素能被scrīpt引用。你可删除Ext.get('mb1').on()那行，加入一些实际用途的代码试试：Ext.onReady(function() {

..............

});

其中Ext.get('mb1').on()函数为页面中名称是mb1的元素注册事件,这个例子中是个Button

当然可以是其他的元素。函数中有两个参数,第一个为要注册的事件名称，第二个是要执行的代码。

Ext.get('mb1').on('click', function(){.....})

也许你会觉察到我们并没有导入xtheme-xxx.css些文件的引用。这些文件是Ext提供的主题文件。我们在hello.htm文件中导入一个样式文件试一试效果。

双击该页面，单击"点击我"按钮,你会看到如下vista样式的效果

还有其他的样式效果，可以根据自己喜欢选择。

xtheme-aero.css

xtheme-gray.css 默认风格

第二章Ext的核心

2.1获取DOM的某个节点

大多数的Javascrīpt操作都需要获取页面上的某个元素（reference）,好让你来做有趣的事情。传统的Javascrīpt方法，是通过ID获取Dom节点的：

var myDiv = document.getElementById('myDiv');

这毫无问题，不过这样单单返回一个对象（DOM节点），用起来并不是太强大和好用。为了要用那节点干点事情，你将会要写不少自定义的代码；另外，对于不同类型浏览器之间的差异，要你处理起来可真头大了。

进入Ext.element对象。元素（element）的的确确是Ext的心脏地带，--无论是访问元素（elements）还是完成一些动作，都要涉及它。Element的API是整个Ext库的基础，如果你时间不多，只想了解Ext中的一个类的话，Element一定是首选！

由ID获取一个Ext Element如下（获得ID为"myDiv"的元素）：

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）。

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

在刚才我们获取好myDiv的位置中加入：

myDiv.highlight(); //黄色高亮显示然后渐退

myDiv.addClass('red'); // 添加自定义CSS类

myDiv.center(); //在视图中将元素居中

myDiv.setOpacity(.25); // 使元素半透明

2.2获取多个DOM的节点

通常情况下，不能由ID获取多个DOM的节点，有可能因为没设置ID,或者你不知道ID,又或者直接用ID 方式引用有太多元素了。这种情况下，你会不用ID来作为获取元素的依据，可能会用属性（attribute）或CSS Classname代替。基于以上的原因，Ext引入了一个功能异常强大的Dom Selector库，叫做DomQuery。

DomQuery可作为单独的库使用，但常用于Ext，你可以在上下文环境中（Context）获取多个元素，然后通过Element接口调用。幸运的是，Element对象本身便有Element.selcect的方法来实现查询，即内部调用DomQuery选取元素。如果想轻松地通过一次操作马上获取每一段

标签，全体执行它们的动作，可以这样做：

// 每段高亮显示

Ext.select('p').highlight();

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

2.3响应事件

大家已经对onReady函数了解，即当页面加载后总会立即执行，功能较单一，这样的话，你便知道，如何响应某个动作或事件来执行你希望做的事情，做法是，先分配一个function，再定义一个event handler 事件处理器来响应。在第一章例子中hello.js文件：

Ext.onReady(function() {

Ext.get('mb1').on('click', function(e){

Ext.MessageBox.alert('提示', '你好，中国');

});

});

其中Ext.get('mb1').on()就是获取ID为'mb1'元素的引用，监听任何发生元素被单击的情况，并分配一个

function,以准备任何单击元素的情况。

正路来说，Element.select也能做同样的事情，即作用在获取一组元素上。下一例中，演示了页面中的某一段落被单击后，便有弹出窗口：

Ext.onReady(function() {

Ext.select('p').on('click', function() {

alert("你好,世界");

});

});

这两个例子中，事件处理的function均是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymous function）”，即是没有名的的函数。你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用。下一例等效于上一例：

Ext.onReady(function() {

var paragraphClicked = function() {

alert("你好,世界");

}

Ext.select('p').on('click', paragraphClicked);

});

到目前为止，我们已经知道如何执行某个动作。但当事件触发时，我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢？要明确这一点非常简单，Element.on方法传入到even handler的function中。在我们之前的例子中，function是忽略这些参数的，到这里可有少许的改变，——我们在功能上提供了更深层次的控制。必须先说明的是，这实际上是Ext的事件对象（event object）,一个跨浏览器和拥有更多控制的事件。例如，可以用下列的语句，恢复这个事件的指定的DOM节点：

Ext.onReady(function() {

var paragraphClicked = function(e) {

Ext.get(e.target).highlight();

}

Ext.select('p').on('click', paragraphClicked);

});

注意指定的是DOM节点，所以我们首先将其恢复成为适当的元素，然后执行欲完成的事件，这个例子中，我们看见段落是高亮显示的。第三章使用Widgets

Widget原意为“小器件”，现指页面中UI控件，除了我们已经讨论过的核心JavaScript库，现在的Ext 亦包括了一系列的最前端的JavaScirptUI组件库。以后将详细介绍一些最常用的widget为例子。

3.1MessageBox

你是否感到传统的消息窗口不太美观，想不想用其他更好的方式实现它呢come on …

Ext.MessageBox提供消息窗口的实现。

3.1.1 Alert

改写hello.js中代码为：

function init() {

//Alert窗口

Ext.get('mb1').on('click', function(){

Ext.MessageBox.alert('Status', '保存成功！', showResult);

});

function showResult(btn){

alert('你单击啦'+btn+'按钮');

};

}

Ext.onReady(init);

在hello.htm的BODY标签内加入元素：

在hello.js文件中我们用"Ext.get('mb1').on"为DOM中节点ID为"mb1"的绑定单击事件，单击后执行操作。Ext.MessageBox.alert方法有三个参数：第一个为消息窗口标题，第二个是显示消息文本，第三个是回调方法，上例中当单击消息窗口上按钮后，将单击的按钮信息返回给回调方法showResult来处理。

我们打开hello.htm文件，单击“Alert窗口”按钮运行效果。

3.1.2 Confirm

继续在hello.js的init函数中加入代码：

//Confirm窗口

Ext.get('mb2').on('click', function(e){

Ext.MessageBox.confirm('Confirm', '是否提交?', showResult);

});

在hello.htm的BODY标签内加入元素：

打开hello.htm文件，单击“Confirm窗口”按钮运行效果。

3.1.2 Prompt

继续在hello.js的init函数中加入代码：

//Prompt窗口

Ext.get('mb3').on('click', function(e){

Ext.MessageBox.prompt('Name', '姓名:', showResultText);

});

function showResultText(btn, text){

};

在hello.htm的BODY标签内加入元素：

注意：这里回调方法接受两个参数，第一个是按钮信息，第二个为所填写文本。

打开hello.htm文件，单击“Prompt窗口”按钮运行效果。

3.1.2 自定义信息窗口

继续在hello.js的init函数中加入代码：

//自定义窗口

Ext.get('mb4').on('click', function(e){

Ext.MessageBox.show({

title: 'Address',

msg: '请输入你的地址:',

width:300,

buttons: Ext.MessageBox.OKCANCEL,

multiline: true,

fn: showResultText

});

});

在hello.htm的BODY标签内加入元素：

现在，观察hello.js文件中MessageBox.show的调用。乍一看，这像一连串的参数传入到方法中，但仔细看，这是一个非常特别的语法。实际上，传入到MessageBox.show的只有一个参数：一个Object literal,包含一组属性和属性值。在Javascript中，Object Literal是动态的，你可在任何时候用{和}创建一个典型的对象(object)。其中的字符由一系列的name/value组成的属性，属性的格式是[property name]:[property value]。在整个Ext中，你将会经常遇到这种模式的语法。使用Object Literal的原因是什么呢？主要的原因是“韧性（flexibility）"，随时可新增、删除属性，亦可不管顺序地插入。而方法不需要改变。这也是多个参数的情况下，为最终开发者带来不少的方便（本例中的MessageBox.show())。例如，我们说这儿的foo.action方法，有四个参数，而只有一个是你必须传入的。本例中，你想像中的代码可能会是这样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写，却是这样，foo.action({ param4: 'hello' })，这更易用和易读。

MessageBox.show()中一属性“multiline: true"设置可以输入多行文本。运行效果如下图：