EXT中文开发教程：详解组件与布局

需积分: 0 145 浏览量更新于2024-07-27 收藏 2.07MB PDF 举报

"Extjs中文教程是一份针对Ext框架的全面开发指南，由网友pjq收集整理于2008年。该教程旨在帮助开发者理解和掌握Ext的各个方面，包括但不限于： 1. EXT简介：文档首先介绍了EXT的概述，强调了其强大的功能和支持，适合那些希望使用Ext进行Web应用开发的人员。 2. 文档结构与下载：教程提供了详尽的目录，涵盖了从安装Ext库、开始开发的基础元素操作（如获取DOM节点和响应事件），到高级功能如Widgets（可重用的UI组件）、Ajax（异步数据交互）等。 3. 源码分析：教程深入剖析了EXT源码，让读者了解代码组织和内部工作原理，这对于理解框架底层机制非常关键。 4. 编程入门：教程引导读者如何进行事前准备，包括JavaScript作用域的理解，以及如何编写符合EXT规范的程序。这部分还讨论了公有、私有和特权变量与函数的重写。 5. DomQuery基础：DomQuery是Ext的重要组成部分，教程详细讲解了其基本概念和如何扩展EXT组件，使开发者能够更高效地操作DOM。 6. 布局管理：教程展示了如何使用EXT的布局系统来设计灵活的用户界面，从简单的例子到Grid组件的复杂布局，都进行了详细的步骤指导。 7. Grid组件：Grid是Extjs的核心组件之一，教程指导读者如何定义数据和列模型，实现分页功能，以及创建菜单和动态添加功能。 8. 模板技术：教程引入了模板（Templates）的概念，解释如何使用它们来格式化数据并构建动态UI。通过这份教程，无论是初学者还是有一定经验的开发者都能从中获益，提升他们的Extjs开发技能。由于内容来自互联网，可能会存在部分过时或需要更新的部分，但整体上，它为学习者提供了一个宝贵的参考资料。"

EXT 中文手册

EXT 中文手册 pjq 收集整理

2008

1.（名词）某样事物执行、操作、拥有控制权的那么一个区域 [1]

2. （名词）编写程序时，程序之中变量的可见度；例如，一个函数能否使用另外一个函数所创建的变量。

[2]

可是这能够说明什么问题呢？每当有人在说“这是作用域的问题”或“作用域搞错了”的时候，那就是

说某个函数运行起来的时候，找不到正确变量的位置。这样我们便知道应该从哪一方面入手，查找出问题

所在。

正式开始

实际上每一个你定义的函数都是某个对象的方法。甚至是这样的写法：

function fn() {

alert(11);

}

老兄你不是故弄玄虚吧～。做一个这样的演示可真得是简单得要命。没错！本例不需要任何 Javascript

文件，服务器或 html。你只要打开 firefox，弹出 firebug,点击 console tab。在 Firefox 状态栏上面看到有>>>

提示的地方就可以输入了。

输入：

function fn() { alert(11); };

然后回车。一切安然...你刚才做的实际上是定义了一个函数 fn。接着试试：

fn();

然后回车。得到 11 的警告窗口？还不错吧？接着试试：

window.fn();

this.fn();

得到一样的结果吧？这是因为函数 fn 是 window 对象的一个方法，在第二行的"this"的作用域实际指

向了 windows 对象。不过多数情况中你不需要像这样 window.myFunction(...)地调用函数，这样太麻烦了，

程序员工作起来会很不方便。

window 对象

window 对象总是存在的，你可理解其为一个浏览器窗口对象。它包含了其它所有的对象如 document

和所有的全局变量。

你可以打开 Firebug，切换到 S cript 页面并在 Firebug 右侧的 New watch expression... 里面输入

window。观察 window 对象究竟有什么在里面。

接着，尝试找出我们之前定义过的 fn 函数。

另外，每个 frame 或 iframe 拥有其自身的 window 对象，其自身的全局空间。

EXT 中文手册

EXT 中文手册 pjq 收集整理

2008

理解作用域

接下的内容开始有点复杂了。切换到 Firebug Console 标签页然后输入：

var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }};

var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }};

结果是什么？你声明了 o1 和 o2 两个对象，分别都有一些属性和方法，但值不同。

接着试试：

fun();

window.fun();

this.fun();

出错了，是吧？因为 window 对象（等价于 this）并没有 fun 的方法。试一试下面的：

o1.fun();

o2.fun();

22 和 33 出来了？非常好！

接下来这部分的内容最复杂啦。基于这个原始的函数，如果对象的数量多的话，你必须为每个对象

加上这个函数－明显是重复劳动了。这样说吧，o1.fun 写得非常清晰的而且为了搞掂它已经占用了我一个

星期的开发时间。想象一下代码到处散布着 this 变量，怎么能不头疼？如果要将调用（执行）的 o1.fun 方

法但 this 会执行 o2,应该怎么实现呢？试一试下面的：

o1.fun.call(o2);

明白了吗？当执行 o1 的 fun 方法时你强行将变量 this 指向到 o2 这个对象，换句话说，更加严谨地

说:o1.fun 的方法在对象 o2 的作用域下运行。

当运行一个函数，一个对象的方法时，你可将作用域当作 this 值的变量。

变量的可见度

变量的可见度和作用域的关系非常密切。我们已经了解到，可在任何对象的外部，声明变量，或在

全局的函数（函数也是变量的一种）也可以，更严格说，它们是全局对象 window 的属性。全局变量在任

何地方都可见；无论函数的内部还是外部。如果你在某一个函数内修改了一个全局变量，其它函数也会得

知这个值是修改过的。

对象可以有它自己的属性（像上面的 testvar）,这些属性允许从内部或是外部均是可见的。试：

alert(o1.testvar); // 从外部访问 o1 的属性 testvar

从内部访问的演示可在两个测试对象的 fun 方法找到。

用关键字 var 在内部声明，相当于声明局部变量（局部声明也是在一条链上，即 Scope Chain 作用域

剩余99页未读，继续阅读

YuFeiDuan

粉丝: 0
资源: 4

EXT中文开发教程：详解组件与布局

ExtJs 实例+ExtJs中文教程（学习extjs必备）

ExtJS中文教程（手册）

很全很实用的ExtJs中文教程

extjs中文教程

ExtJs中文教程

ExtJs 中文教程

extjs中文教程 ajax

Extjs中文教程,Extjs官方提供

Extjs中文教程2.x

Extjs中文教程+Ext API

最新资源