《ext+中文手册》由会员分享，可在线阅读，更多相关《ext+中文手册（99页珍藏版）》请在金锄头文库上搜索。
1、EXTEXTEXTEXT 中文手册中文手册前言 本手册所有内容均粘贴自互联网，如有错误，请多见谅。目录EXT 中文手册.1 EXT 简介3 目 錄目 錄 3 下载 Ext4 开始！.4 Element：Ext 的核心.4 获取多个 DOM 的节点5 响应事件.5 使用 Widgets.7 使用 Ajax9 EXT 源码概述11 揭示源代码.11 发布 Ext 源码时的一些细节. 12 我应该从哪里开始？.13 适配器 Adapters. 13 核心 Core13 Javascript 中的作用域（scope）.13 事前准备.13 定义.13 正式开始.14 window 对象.14 理解作用
2、域.15 变量的可见度.15 EXT 程序规划入门16 事前准备.16 需要些什么？.16 applayout.html.16 applayout.js. 17 公开 Public、私有 Private、特权的 Privileged？19 重写公共变量.21 重写（Overriding）公共函数. 21 DomQuery 基础22 DomQuery 基础22 扩展 EXT 组件.29 文件的创建.30 Lets go33 完成.35 EXT 的布局（Layout）.37 简单的例子.38 加入内容.42 开始使用 Grid.51步骤一 定义数据(Data Definition). 51 步骤二
3、 列模型（Column Model）.52 Grid 组件的简易分页.53 GridGrid 数 据数 据 53 怎 么 做 一 个 分 页 的怎 么 做 一 个 分 页 的 GridGrid54 分 页 栏分 页 栏 ToolbarToolbar.55 EXT Menu 组件55 创 建 简 易 菜 单创 建 简 易 菜 单 .56 各 种各 种 ItemItem 的 类 型的 类 型 .57 ItemItem 属 性属 性 57 在在 UIUI 中 摆 放 菜 单中 摆 放 菜 单 .58 MenuMenu 的 分 配 方 式 ：的 分 配 方 式 ： .58 练 一 练练 一 练 .60
4、 动 态 添 加 菜 单 按 钮 到动 态 添 加 菜 单 按 钮 到 ToolbarToolbar.61 更 方 便 的 是更 方 便 的 是 61 下 一 步 是下 一 步 是 . 62 模板（Templates）起步.62 第一步 您的 HTML 模板62 第二步，将数据加入到模板中.62 下一步.63 学习利用模板（Templates）的格式化功能.63 正式开始.63 下一步.64 事件处理.64 非 常 基 础 的 例 子非 常 基 础 的 例 子 64 处 理 函 数 的 作 用 域处 理 函 数 的 作 用 域 64 传 递 参 数传 递 参 数 . 65 类设计.66 对 象
5、 创 建对 象 创 建 . 66 使 用 构 造 器 函 数使 用 构 造 器 函 数 66 方 法 共 享方 法 共 享 . 66 表单组件入门.67 表单体.67 创建表单字段.67 完成表单.68 下一步.69 为一个表单填充或提交数据.69 让我们开始吧.69 读取我们的数据.71 EXT 中的继承71 补充资料.73 Ext 2 概述73 组件模型 Component Model.74 容器模型 Container Model.78布局 Layouts. 80 Grid. 82 XTemplate.83 DataView.84 其它新组件.84 EXT2 简介85 下载 Ext85
6、开始！.85 Element：Ext 的核心.86 获取多个 DOM 的节点87 响应事件.87 使用 Widgets.88 編輯 使用 Ajax91 TabPanel 基础.94 Step 1: 创建 HTML 骨架.94 Step 2: Ext 结构的构建96 Step 3: 创建 Tab 控制逻辑97EXTEXTEXTEXT 简介简介简介简介无论你是 Ext 库的新手，抑或是想了解 Ext 的人，本篇文章的内容都适合你。本文将简单地介绍 Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些 JavaScript 经验和初级了解 HTML Dom。目 錄目
7、錄1 下载 Ext2 开始！3 Element：Ext 的核心4 获取多个 DOM 的节点5 响应事件6 使用 Widgetso6.1 MessageBoxo6.2 Grido6.3 还有更多的7 使用 Ajaxo7.1 PHPo7.2ASP.Neto7.3 Cold Fusion下载下载 ExtExtExtExt如果你未曾下载过，那应从这里下载最新版本的 Ext http:/ 。针对你的下载需求，有几个不同的弹性选项。通常地，最稳定的版本，是较多人的选择。下载解包后，那个 example 文件夹便是一个探索 Ext 的好地方！开始！开始！DownloadDownloadDownloadDow
8、nload ExampleExampleExampleExample FileFileFileFileIntroToExt.zip我们将使用 Ext，来完成一些 JavaScript 任务。Zip 文件包括三个文件：ExtStart.htmlExtStart.htmlExtStart.htmlExtStart.html, ExtStart.jsExtStart.jsExtStart.jsExtStart.js 和 ExtStart.cssExtStart.cssExtStart.cssExtStart.css。解包这三个文件到 Ext 的安装目录中（例如，Ext 是在“C:codeExtv1.
9、0”中，那应该在“v1.0“里面新建目录“tutorial”。双击 ExtStart.htmExtStart.htmExtStart.htmExtStart.htm， 接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个 Javascript 错误，请按照页面上的指引操作。在你常用的 IDE 中或文本编辑器中，打开 ExtStart.js 看看：Ext.onReady 可能是你接触的第一个方法。这个方法是指当前 DOM 加载完毕后，保证页面内的所有元素能被 Script 引用（reference） 。你可删除 alert()那行，加入一些实际用途的代码试试：Ext.onRe
10、ady(function() alert(“Congratulations!You have Ext configured correctly!“););ElementElementElementElement：ExtExtExtExt 的核心的核心大多数的 JavaScript 操作都需要先获取页面上的某个元素（reference）,好让你来做些实质性的事情。传统的 JavaScript 方法，是通过 ID 获取 Dom 节点的：var myDiv = document.getElementById(myDiv);这毫无问题，不过这样单单返回一个对象（DOM 节点） ，用起来并不是太实用和方
11、便。为了要用那节点干点事情，你还将要手工编写不少的代码；另外，对于不同类型浏览器之间的差异，要你处理起来可真头大了。进入 Ext.element 对象。元素（element）的的确确是 Ext 的心脏地带，-无论是访问元素（elements）还是完成一些其他动作，都要涉及它。Element 的 API 是整个 Ext 库的基础，如果你时间不多，只是想了解 Ext 中的一两个类的话，Element 一定是首选！由ID获取一个Ext Element如下 （首页ExtStart.htm包含一个div， ID名字为“myDiv”， 然后， 在ExtStart.js中加入下列语句） ：Ext.onRea
12、dy(function() var myDiv = Ext.get(myDiv););再回头看看 Element 对象，发现什么有趣的东东呢？Element 包含了常见的 DOM 方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom 的话，就可以直接访问底层 DOM 的节点。 ） ；Element.get()方法内置缓存处理（Cache)，多次访问同一对象效率上有极大优势；内置常用的 DOM 节点的动作， 并且是跨浏览器的定位的位置、 大小、 动画、 拖放等等 （add/removeCSS classes, add/remove event handlers, po
13、sitioning, sizing, animation, drag/drop） 。这意味着你可用少量的代码来做各种各样的事情，这里仅仅是一个简单的例子（完整的列表在ElementAPI 中） 。继续在 ExtStart.js 中，在刚才我们获取好 myDiv 的位置中加入：myDiv.highlight();/黄色高亮显示然后渐退myDiv.addClass(red);/ 添加自定义 CSS 类 (在 ExtStart.css 定义)myDiv.center();/在视图中将元素居中myDiv.setOpacity(.25);/ 使元素半透明获取多个获取多个 DOMDOMDOMDOM 的节点
14、的节点通常情况下，想获取多个 DOM 的节点，难以依靠 ID 的方式来获取。有可能因为没设置 ID,或者你不知道 ID,又或者直接用 ID 方式引用有太多元素了。这种情况下，你就会不用 ID 来作为获取元素的依据，可能会用属性（attribute）或 CSS Classname 代替。基于以上的原因，Ext 引入了一个功能异常强大的 DomSelector 库，叫做 DomQuery。DomQuery 可作为单独的库使用，但常用于 Ext，你可以在上下文环境中（Context）获取多个元素，然后通过 Element 接口调用。令人欣喜的是，Element 对象本身便有 Element.selc
15、ect 的方法来实现查询，即内部调用 DomQuery 选取元素。这个简单的例子中， ExtStart.htm 包含若干段落（标签） ，没有一个是有 ID 的，而你想轻松地通过一次操作马上获取每一段，全体执行它们的动作，可以这样做：/ 每段高亮显示Ext.select(p).highlight();DomQuery 的选取参数是一段较长的数组，其中包括 W3C CSS3 Dom 选取器、基本 XPatch、HTML属性和更多，请参阅 DomQueryAPI 文档以了解这功能强大的库个中细节。响应事件响应事件到这范例为止，我们所写的代码都是放在 onReady 中，即当页面加载后总会立即执行，功
16、能较单一这样的话， 你便知道， 如何响应某个动作或事件来执行你希望做的事情， 做法是， 先分配一个 function，再定义一个 event handler 事件处理器来响应。我们由这个简单的范例开始，打开 ExtStart.js，编辑下列的代码：Ext.onReady(function() Ext.get(myButton).on(click, function()alert(“You clicked the button“);););加载好页面，代码依然会执行，不过区别是，包含 alert()的 function 是已定义好的，但它不会立即地被执行，是分配到按钮的单击事件中。用浅显的文字解释，就是：获取 ID 为myDottom元素的引用，监听任何发生这个元素上被单击的情况，并分配一个 function,以准备任何单击元素的情况。正路来说，Element.select 也能做同样的事情，即作用在获取一组元素上。下一例中，演示了页面中的某一段落被单击后，
