EXTJS教程

大白菜制作 http://hi.baidu.com/xiaolincc26/home 1 EXT（JS）教程 Ext简介 本教程适用于 Ext 2.0的版本，而版本 1.x仍可找到。 无论你是 Ext库的新手，抑或是想了解 Ext的人，本篇文章的内容都 适合你。本文将简单地介绍 Ext的几个基本概念，和如何快速地做出 一个动态的页面并运行起来，假设读者已具备了一些 JavaScript 经 验和简单了解 HTML的文档对象模型（document object model ，DOM）。 下载 Ext 如果你未曾下载过，那应从官方网站那里下载最新版本的 Ext http://extjs.com/downloads 。 因应各种的下载需求，有几种不同的可选项。通常地，最稳定的版本， 是较多人的选择。下载解包后，那个 example 文件夹便是一个探索 Ext的好地方！ 开始！ 下载示例文件 · IntroToExt2.zip 我们将讲讲怎么使用 Ext，来完成一些 JavaScript 常见的任务。如 果你想自己试试，就应该先下 IntroToExt2.zip，用来构建已下面的 Ext代码。 大白菜制作 http://hi.baidu.com/xiaolincc26/home 2 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("Congratulations! You have Ext configured correctly!"); }); Ext.onReady可能是你接触的第一个也可能是在每个页面都要使用的 方法。这个方法会在 DOM加载全部完毕后，保证页面内的所有元素能 被 Script引用（reference）之后调用。你可删除 alert()那行，加 入一些实际用途的代码试试。 Element：Ext的核心 大多数的 JavaScript 操作都需要先获取页面上的某个元素的引用 （reference）,好让你来做些实质性的事情。传统的 JavaScript 做 法，是通过 ID获取 Dom节点的： var myDiv = document.getElementById('myDiv'); 这毫无问 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 ，不过这样单单返回一个对象（DOM 节点），用起来并不 是太实用和方便。为了要用那节点干点事情，你还将要手工编写不少 大白菜制作 http://hi.baidu.com/xiaolincc26/home 3 的代码；另外，对于不同类型浏览器之间的差异，要处理起来可真头 大了。 进入 Ext.element 对象。元素（element）的的确确是 Ext的心脏地 带，--无论是访问元素（elements）还是完成一些其他动作，都要涉 及它。Element的 API是整个 Ext库的基础，如果你时间不多，只是 想了解 Ext中的一两个类的话，Element一定是首选！ 由 ID获取一个 Ext Element如下（首页 ExtStart.htm包含一个 div， ID名字为“myDiv”，然后，在 ExtStart.js中加入下列语句）： The corresponding code 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 大白菜制作 http://hi.baidu.com/xiaolincc26/home 4 event handlers, positioning, sizing, animation, drag/drop）。 这意味着你可用少量的代码来做各种各样的事情，这里仅仅是一个简 单的例子（完整的列 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 在 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引入了一个异常强大的 Dom Selector库，叫做 DomQuery。 DomQuery可作为单独的库使用，但常用于 Ext，你可以在上下文环境 中（Context）获取多个元素，然后通过 Element 接口调用。令人欣 喜的是，Element对象本身便有 Element.selcect的方法来实现查询， 即内部调用 DomQuery 选取元素。这个简单的例子中，ExtStart.htm 包含若干段落（ 标签），没有一个是有 ID的，而你想轻松地通过一次操作马上获取每 一段，全体执行它们的动作，可以这样做： 大白菜制作 http://hi.baidu.com/xiaolincc26/home 5 // 每段高亮显示 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'元素 大白菜制作 http://hi.baidu.com/xiaolincc26/home 6 的引用，监听任何发生这个元素上被单击的情况，并分配一个 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("You clicked a paragraph"); } Ext.select('p').on('click', paragraphClicked); }); 到目前为止，我们已经知道如何执行某个动作。但当事件触发时，我 们如何得知这个 event handler执行时是作用在哪一个特定的元素上 大白菜制作 http://hi.baidu.com/xiaolincc26/home 7 呢？要明确这一点非常简单，Element.on 方法传入到 even handler 的 function 中（我们这里先讨论第一个参数，不过你应该浏览 API 文档以了解 even handler 更多的细节）。在我们之前的例子中， function 是忽略这些参数的，到这里可有少许的改变，——我们在 功能上提供了更深层次的控制。必须先说明的是，这实际上是 Ext的 事件对象（event object）,一个跨浏览器和拥有更多控制的事件的 对象。例如，可以用下列的语句，得到这个事件响应所在的 DOM节点： Ext.onReady(function(){ var paragraphClicked = 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 大白菜制作 http://hi.baidu.com/xiaolincc26/home 8 比起略为沉闷的“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 }); 这里有些新的概念需要讨论一下。在第一行中我们创建了一个局部变 量（Local Variable）来保存某个元素的引用，即被单击的那个 DOM 节点（本例中，DOM 节点指的是段落 paragrah,事因我们已经定义该 事件与 标签发生关联的了）。为什么要这样做呢？嗯...观察上面的代码，我 们需要引用同一元素来高亮显示，在 MessageBox 中也是引用同一元 素作为参数使用。 大白菜制作 http://hi.baidu.com/xiaolincc26/home 9 一般来说，多次重复使用同一值（Value）或对象，是一个不好的方 式，所以，作为一个具备良好 OO 思维的开发者，应该是将其分配到 一个局部变量中，反复使用这变量！ 现在，为了我们接下来阐述新概念的演示，请观察 MessageBox 的调 用。乍一看，这像一连串的参数传入到方法中，但仔细看，这是一个 非常特别的语法。实际上，传入到 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' })，这更易用和易读。 Grid Grid 是 Ext 中人们最想先睹为快的和最为流行 Widgets 之一。好， 让我们看看怎么轻松地创建一个 Grid 并运行。用下列代码替换 大白菜制作 http://hi.baidu.com/xiaolincc26/home 10 ExtStart.js中全部语句： Ext.onReady(function(){ var myData = [ ['Apple',29.89,0.24,0.81,'9/1 12:00am'], ['Ext',83.81,0.28,0.34,'9/12 12:00am'], ['Google',71.72,0.02,0.03,'10/1 12:00am'], ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'], ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am'] ]; var myReader = new Ext.data.ArrayReader({}, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ]); var grid = new Ext.grid.GridPanel({ store: new Ext.data.Store({ data: myData, reader: myReader }), columns: [ {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: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], viewConfig: { forceFit: true }, renderTo: 'content', title: 'My First Grid', 大白菜制作 http://hi.baidu.com/xiaolincc26/home 11 width: 500, frame: true }); grid.getSelectionModel().selectFirstRow(); }); 这看上去很复杂，但实际上加起来，只有四行代码（不包含测试数据 的代码）。 · 第一行创建数组并作为数据源。实际案例中，你很可能 从数据库、或者 WebService那里得到动态的数据。 · 接着，我们创建并加载 data store， data store 将会 告诉 Ext的底层库接手处理和格式化这些数据。不同的数据类型须在 类 Reader中指明。 · 接着，我们创建一个 Grid 的组件，传入各种的配置值， 有： o 新的 data store, 配置好测试数据和 reader o 列模型 column model定义了 列 columns的配置 o 其他的选择指定了 Grid所需的功能 · 最后，通过 SelectionModel告诉 Grid高亮显示第一行。 当然，你现在还未掌握这段代码的某些细节，但先不要紧，这个例子 的目的是告诉你，只要学习了少量的几行代码，创建一个富界面的多 功能的 UI组件是可能的。更多的 grid细节读者可作为一种练习去学 习。这儿有许多学习 Grid的资源，Ext Grid教程、Grid交互演示交 和 Grid API文档。 还有更多的.. 大白菜制作 http://hi.baidu.com/xiaolincc26/home 12 这只是冰山一角。还有一打的 UI Widgets可以供调用，如 layouts, tabs, menus, toolbars, dialogs, tree view 等等。请探索 范例 演示。 編輯使用 Ajax 在弄好一些页面后，你已经懂得在页面和脚本之间的交互（interact） 原理。接下来，你应该掌握的是，怎样与远程服务器（remote server） 交换数据，常见的是从数据库加载数据（load）或是保存数据（save） 到数据库中。通过 JavaScript 异步无刷新交换数据的这种方式，就 是所谓的 Ajax。Ext内建卓越的 Ajax 支持，例如，一个普遍的用户 操作就是，异步发送一些东西到服务器，然后，UI 元素根据回应 （Response）作出更新。这是一个包含 text input的表单，一个 div 用于显示消息（注意，你可以在 ExtStart.html中加入下列代码，但 这必须要访问服务器）：