《EXT中文手册.doc》由会员分享,可在线阅读,更多相关《EXT中文手册.doc(103页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、【精品文档】如有侵权,请联系网站删除,仅供学习与交流EXT中文手册.精品文档.EXT 中文手册开发必备该文档内容取自互联网,详细的介绍了 EXT 的各部分内容,希望对大家有所帮助pjq 2008-5-25 2 EXT 中文手册EXT 中文手册前言本手册所有内容均粘贴自互联网,如有错误,请多见谅。EXT 中文手册 pjq 收集整理20083 EXT 中文手册目录EXT 中文手册 . 1 EXT 简介 . 5 目 錄 . 5 下载 Ext . 6 开始! . 6 Element:Ext 的核心 . 6 获取多个 DOM 的节点 . 7 响应事件. 7 使用 Widgets . 9 使用 Ajax
2、.11 EXT 源码概述 . 13 揭示源代码 . 13 发布 Ext 源码时的一些细节 . 14 我应该从哪里开始? . 15 适配器 Adapters. 15 核心 Core . 15 Javascript 中的作用域(scope) . 15 事前准备. 15 定义. 15 正式开始. 16 window 对象 . 16 理解作用域 . 17 变量的可见度. 17 EXT 程序规划入门 . 18 事前准备. 18 需要些什么?. 18 applayout.html. 18 applayout.js. 19 公开 Public 、私有 Private、特权的 Privileged?. 21
3、重写公共变量. 23 重写(Overriding)公共函数 . 23 DomQuery 基础 . 24 DomQuery 基础 . 24 扩展 EXT 组件 . 31 文件的创建 . 31 Lets go. 35 完成. 37 EXT 的布局(Layout). 39 简单的例子 . 40 加入内容. 43 开始使用 Grid . 53 EXT 中文手册 pjq 收集整理20084 EXT 中文手册步骤一 定义数据(Data Definition) . 53 步骤二 列模型(Column Model). 54 Grid 组件的简易分页 . 55 G r i d 数 据 . 55 怎 么 做 一
4、个 分 页 的 G r i d . 56 分 页 栏 T o o l b a r . 56 EXT Menu 组件 . 57 创 建 简 易 菜 单 . 57 各 种 I t e m 的 类 型 . 59 I t e m 属 性 . 59 在 U I 中 摆 放 菜 单 . 59 M e n u 的 分 配 方 式 : . 60 练 一 练 . 62 动 态 添 加 菜 单 按 钮 到 T o o l b a r . 62 更 方 便 的 是 . 63 下 一 步 是 . 63 模板(Templates)起步 . 63 第一步 您的 HTML 模板. 63 第二步,将数据加入到模板中 . 64
5、 下一步 . 64 学习利用模板(Templates)的格式化功能 . 64 正式开始. 64 下一步 . 66 事件处理. 66 非 常 基 础 的 例 子 . 66 处 理 函 数 的 作 用 域 . 66 传 递 参 数 . 67 类设计 . 67 对 象 创 建 . 67 使 用 构 造 器 函 数 . 68 方 法 共 享 . 68 表单组件入门. 69 表单体 . 69 创建表单字段. 69 完成表单. 70 下一步 . 71 为一个表单填充或提交数据. 71 让我们开始吧. 71 读取我们的数据 . 72 EXT 中的继承 . 73 补充资料. 74 Ext 2概述 . 74 组
6、件模型 Component Model. 76 容器模型 Container Model . 80 EXT 中文手册 pjq 收集整理20085 EXT 中文手册布局 Layouts. 81 Grid . 84 XTemplate . 84 DataView. 85 其它新组件 . 85 EXT2 简介 . 86 下载 Ext . 86 开始! . 87 Element:Ext 的核心 . 87 获取多个 DOM 的节点 . 88 响应事件. 88 使用 Widgets . 90 編輯 使用 Ajax . 93 TabPanel 基础 . 96 Step 1: 创建 HTML 骨架 . 96
7、Step 2: Ext 结构的构建. 97 Step 3: 创建 Tab 控制逻辑 . 99 EXT 简介无论你是 Ext 库的新手,抑或是想了解 Ext 的人,本篇文章的内容都适合你。本文将简单地介绍 Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初级了解 HTML Dom。目 錄1 下载 Ext 2 开始! 3 Element:Ext 的核心 4 获取多个 DOM 的节点 5 响应事件 6 使用 Widgets o6.1 MessageBox o6.2 Grid o6.3 还有更多的. 7 使用 Ajax o7.1 PHP o
8、7.2 ASP.Net o7.3 Cold Fusion EXT 中文手册 pjq 收集整理2008下载 Ext EXT 中文手册20086 如果你未曾下载过,那应从这里下载最新版本的 Ext 。针对你的下载需求,有几个不同的弹性选项。通常地,最稳定的版本,是较多人的选择。下载解包后,那个 example 文件夹便是一个探索 Ext 的好地方!开始!Download Example FileIntroToExt.zip 我们将使用 Ext,来完成一些 JavaScript 任务。Zip 文件包括三个文件:ExtStart.html,ExtStart.js 和 ExtStart.css。解包这三
9、个文件到 Ext 的安装目录中(例如,Ext 是在C:codeExtv1.0 中,那应该在v1.0里面新建目录tutorial 。双击 ExtStart.htm,接着你的浏览器打开启动页面,应该会有一条消息告诉你配置已完毕。如果是一个 Javascript 错误,请按照页面上的指引操作。在你常用的 IDE 中或文本编辑器中,打开 ExtStart.js 看看:Ext.onReady可能是你接触的第一个方法。这个方法是指当前 DOM加载完毕后,保证页面内的所有元素能被 Script 引用(reference)。你可删除 alert()那行,加入一些实际用途的代码试试:Ext.onReady(fu
10、nction() alert(Congratulations! You have Ext configured correctly!); Element:Ext 的核心大多数的 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 中文手册 pjq 收集整理7 EXT 中文手册Ext.onReady(function()
12、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, ani
13、mation, drag/drop )。这意味着你可用少量的代码来做各种各样的事情,这里仅仅是一个简单的例子(完整的列表在ElementAPI 中)。继续在 ExtStart.js 中,在刚才我们获取好 myDiv 的位置中加入:myDiv.highlight(); /黄色高亮显示然后渐退myDiv.addClass(red); /添加自定义 CSS 类 (在 ExtStart.css 定义) myDiv.center(); /在视图中将元素居中myDiv.setOpacity(.25); /使元素半透明获取多个 DOM 的节点通常情况下,想获取多个 DOM 的节点,难以依靠 ID 的方式来获
14、取。有可能因为没设置 ID,或者你不知道 ID,又或者直接用 ID方式引用有太多元素了。这种情况下,你就会不用 ID来作为获取元素的依据,可能会用属性(attribute)或 CSS Classname 代替。基于以上的原因,Ext 引入了一个功能异常强大的 Dom Selector 库,叫做 DomQuery。DomQuery 可作为单独的库使用,但常用于 Ext,你可以在上下文环境中(Context)获取多个元素,然后通过 Element 接口调用。令人欣喜的是,Element 对象本身便有 Element.selcect 的方法来实现查询,即内部调用 DomQuery 选取元素。这个简单
15、的例子中, ExtStart.htm 包含若干段落(标签),没有一个是有ID的,而你想轻松地通过一次操作马上获取每一段,全体执行它们的动作,可以这样做:/每段高亮显示Ext.select(p).highlight(); DomQuery 的选取参数是一段较长的数组,其中包括 W3C CSS3 Dom 选取器、基本 XPatch、HTML属性和更多,请参阅 DomQuery API 文档以了解这功能强大的库个中细节。响应事件到这范例为止,我们所写的代码都是放在onReady中,即当页面加载后总会立即执行,功能较单一这样的话,你便知道,如何响应某个动作或事件来执行你希望做的事情,做法是,先分配一个 function,再定义一个 ev