Extjs基础教程.docx

Extjs基础教程.docx

《Extjs基础教程.docx》由会员分享，可在线阅读，更多相关《Extjs基础教程.docx（24页珍藏版）》请在冰豆网上搜索。

Extjs基础教程

目录

1文档说明3

2词汇定义和图片：

4

Extjs：

XXXX4

可以贴图说明结构（可选）4

3章节14

3.1小章节：

5

3.2小章节5

A.子章节6

B.子章节6

1文档说明

本文档是针对Extjs的基础教程,主要内容为Extjs的概述及Extjs各种常用控件的使用.更适用于初学Extjs时使用。

2词汇定义和图片：

Extjs：

基于html/css+javascript的Ajax框架，主要用于创建前端用户界面。

Extjs是一个跨浏览器的应用,

RIA（RichInternetApplications）：

富互联网应用，具有高度互动性、丰富用户体验以及功能强大的客户端。

MVC：

（ModelViewController）即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层

Ext的适配器：

Ext成型于YahooUI的Javascript库的扩展。

在当时，Ext须依赖YUI的底层代码来处理跨浏览器的问题。

现在ExtJS已经是独立、免依赖的库了（standalone），你可将Extjs替换为另外你所选择javascript库，如prototype、jQuery、或者是这些之中的最佳选择,－>Ext自带的底层库。

负责将这些库（包括Ext自带的底层库）映射为Ext底层库的这部分代码，我们称之为适配器（Adapters）。

3javascript

在开始Extjs的学习前,我们先来了解一点javascrip的基础知识吧.

3.1数据格式之最最最基本的JSON

说到javasript,首先不得不提的就是json了,我们先来看看官方的解释吧。

JSON即JavaScriptObjectNatation，它是一种轻量级的数据交换格式，已经是javascript标准的一部分.对于WEB2.0来说,Json是目前最灵活的解决方案。

好了，官方的部分就先看到这里吧，了解了解就行了，下面我们来说JSON到底是什么样的吧。

上文有说到JSON是一种数据格式,它是怎么样的一种数据格式呢·？

学过JAVA的同学应该都知道MAP及Map灵活的键值对的数据格式。

Json同样也是一种键值对（Key-Value）的数据格式.key->string型数据,value可以是任何的数据类型,包括基本数据类型,如string,int,date,等.也可以是一个json,还可以是某个方法（函数）.通过这样一种灵活的数据格式,我们可以在实际开发过程中利用json来组装各种各样的数据.如同java的bean一样，我们随时可以用json非常灵活,构造出我们想要的bean,我们想要的对象.来达到我们程序的需要。

所以，Javascrip是一种弱类型的语言.但他也是面向对象的。

3.2Javascript的类:

Javascrip与其他的面向对象语言如java,.net不同,它并不是基于类而是基于原型的。

Javascvipt的类其实也可以看作是json和函数的一个深度的运用.（个人理解，不代表官方言论.欢迎探讨）

在javascript创建一个类非常的容易：

//定义名为myClass的单例类

myClass=function{

//privatezone

varaVar=15,

//publiczone

returnaMethod:

function（）{

alert（"I'mamethodoftheobjectmyObject."+"aVar:

"+aVar）;

}

}（）;

myClass.aMethod（）；

上述是一个全局的单例类的写法.只要myClass不使用var声明,那么这个类相对于整个有效范围内是全局的.（有效范围是指当前页面）.Function（）{}后面加（）是使myClass成为一个单例类,在这里是闭包的一种实现。

包括使函数里定义的属性成为私有属性，不对外开发。

需要开放的属性与方法统统有return处定义。

如果我们需要多次使用同一种类对象（可以多例化的类）,那就必须用到javascript特有的一种东西:

构造器函数和new关键字了.

使用构造器函数

在Javascript中没有专门的类的概念，但是构造器是存在的。

我们定义的function其实就可以看作是一个构造器,他构造了一类对象。

你可以编写一个函数，然后通过new关键字+这个函数来创建一个这种函数类型的对象。

该对象的属性及方法在函数内部定义.

//首先，我们为我们的类定义一个带一个参数的构造器

VarmyClass=function（config）{

this.aVar=15;//定义默认的aVar属性;

this.aMethod=function（）{

alert（"I'mamethodoftheobjectmyObject."）;

}

}

//创建类的实例

varA=newmyClass（）;

//显示15

alert（A.aVar）;

//第二个实例

varB=newmyClass（）;

javascript的原型与方法共享:

你必须使用prototype对象：

//我们定义了一个prototype对象的一个方法

myClass.prototype.sharedMethod=function（）{alert（"I'masharedmethod"）}

//显示我们的信息

A.sharedMethod（）;

//相同的信息

B.sharedMethod（）;

原型.prototype

JavaScript的所有function类型的对象都有一个prototype属性。

这个prototype属性本身又是一个object类型的对象，因此我们也可以给这个prototype对象添加任意的属性和方法。

prototype是对象的“原型”，由该函数构造出来的对象应该都会具有这个“原型”的特性。

事实上，在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。

也可以说，prototype提供了一群同类对象共享属性和方法的机制

此外javascript的类还有几种其他不同的写法,以上两种写法为目前eVoice中常用的两种。

4Extjs概要

　ExtJS是一种用于在客户端创建丰富多彩的web应用程序界面，可以用来开发RIA的AJAX应用，是完全基于纯Html/CSS+JS技术的Ajax框架，提供了丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层（VIEW）的负荷真正减轻，从而达到客户端的MVC应用。

4.1组件模型ComponentMode

首先我们看一下组件的结构图：

组件是指Extjs中各式各样的显式控件,eVoice中目前用到的主要有Grid,FormPanel,TreePanel,menu,tabPanel,button,toolbar,Window,MessageBox,ProgressBar,LoadMask各种form表单控件等等:

其中大部分继承于组件Componet类,少量继承于Object.

Component类是整个Extjs架构中的最基础的类之一.大部分的组件对象都继承于Component

组件对象为组件的创建，渲染，事件处理，状态管理和销毁提供了统一的模型。

我们构造的每一个组件都具备了由组件对象扩展出来的特性。

对于EXT中的组件对象，我们可以用Ext.getCmp（组件id）的方式获取。

以下是Ext2系列中组件对象的关键特性：

∙显式声明构建器链和重写Explicitconstructorchainingandoverriding

组件会将一个基础构造器连同配置传入到子类中。

函数initComponent用于提供制定的构造器逻辑，只要在继承链上的某一个子类实现便可，所有的组件都遵从此方式。

此时的子类就可在initComponent中对其设置相关的属性，实现具体的功能。

∙可调控的渲染Managedrendering

2.0中，每个组件都支持延时渲染（lazyrendering），又称按需渲染（on-demandrendering）。

渲染的调控是自动为你完好的。

即使如此，你亦可以通过的beforerender和render事件控制渲染发生、结束，达到最为灵活的自定义调控。

∙可调控的销毁Manageddestruction

每一个组件具有destroy的函数，当组件不再需要时，Ext就负责组件的结束调控，如自动垃圾回收和摧毁组件元素。

当然，销毁亦提供相应的事件，如beforedestroy和destroy可按照实际的情况作出逻辑处理。

∙管理声明自动化Automaticstatemanagement

组件内建设置和获取状态（State）的功能，只要是全局对象StateManager和一个状态Provider都初始化好，那么多数的组件都具有自动状态管理的能力。

∙组件常规行为的统一接口Consistentinterfaceforbasiccomponentbehavior

一般常规的行为如隐藏、显示和激活、禁用均是组件的基本特性。

如需要，这些都可由子类去重写或制定。

∙由组件管理器负责的可用调配AvailabilityviaComponentMgr

Ext的每一个组件在创建的时候就会由组件管理器登记注册，即你可随时获取任何组件，只需调用Ext.getCmp（'id'）。

支持插件Pluginsupport

现在任何的组件可以通过插件的形式来扩展了。

插件实质是带有init方法的一种类。

该方法会有一个单独的参数（类型为Ext.Component）传入到其中。

插件可通过组件的plugins配置项指定。

当组件创建时，如果有插件可用，组件就会调用每个插件上的init方法，传递自身的引用作为参数。

每个插件之后可调用方法或响应组件的事件以实现自身的功能。

4.1.1组件的生存周期ComponentLifeCycle

4.1.1.1初始化Initialization

1.配置项对象生效了

Theconfigobjectisapplied.

组件对象的构造器会把全部的配置项传入到其子类中去，并且进行下列所有的步骤。

2.组件的底层事件创建了

ThebaseComponenteventsarecreated

这些事件由组件对象负责触发。

事件有enable,disable,beforeshow,show,beforehide,hide,beforerender,render,beforedestroy,destroy（参阅ComponentAPI文档完整的内容）。

3.组件在组件管理器里登记了

ThecomponentisregisteredinComponentMgr

initComponent这方法总是使用在子类中，就其本身而论，该方法是一个模板方法（templatemethod），用于每个子类去现实任何所需的构造器逻辑（anyneededconstructorlogic）。

首先会创建类，然后组件对象各层次里面的每个类都应该调用superclass.initComponent。

通过该方法，就可方便地实现（implement），或重写（Override）任意一层构造器的逻辑。

4.状态感知进行初始化（如果有的话）

Stateisinitialized（ifapplicable）

如果组件是状态感知的，其状态会进行刷新。

5.加载好插件（如果有的话）

Pluginsareloaded（ifapplicable）

如果该组件有指定任何插件，这时便会初始化。

6.渲染好插件（如果有的话）

Thecomponentisrendered（ifapplicable）

如果指定了组件的renderTo或applyTo配置属性，那么渲染工作就会立即开始，否则会延时渲染，即等待到显式控制显示，或是其容器告知其显示的命令。

4.1.1.2渲染过程Rendering

1.触发beforerender事件Thebeforerendereventisfired

这是个可取消的事件，指定的handler可阻止组件进行渲染

2.设置好容器Thecontainerisset

如果没有指定一个容器，那么将使用位于DOM元素中组件的父节点作为容器。

3.调用onRender方法heonRendermethodiscalled

这是子类渲染最重要的一个步骤，由于该方法是一个模板方法（templatemethod），用于每个子类去现实任何所需的渲染逻辑（anyneededrenderlogic）。

首先会创建类，然后组件对象各层次里面的每个类都应调用superclass.onRender。

通过该方法，就可方便地实现（implement），或重写（Override）任意一层渲染的逻辑。

4.组件是“隐藏”状态的TheComponentis"unhidden"

默认下，许多组件是在CSS样式类如"x-hidden"设置隐藏的。

如果autoShow所配置的值为true，这时就不会有这个"hide"样式类作用在该组件上

5.自定义的类、样式生效了Customclassand/orstyleapplied

一切组件的子类都支持cls和style两种特殊的配置属性，分别用于指定用户自定义的CSS样式类和CSS规则。

推荐指定cls的方法来制定组件及其各部分的可视化设置。

由于该样式类会套用在组件makeup最外的一层元素，所以标准CSS规则会继承到组件下任何子元素的身上。

6.触发render事件Therendereventisfired

这是组件通知成功渲染的一个步骤。

这时，你可肯定认为组件的DOM元素已经是可用的了。

如果尝试在组件之前访问组件，会报告一个不可用的错误。

7.调用了afterRender方法TheafterRendermethodiscalled

这是另外一个实现或重写特定所需的“后渲染”逻辑的模板方法。

每个子类应调用superclass.afterRender.

8.组件被隐藏或禁用（如果有的话）TheComponentishiddenand/ordisabled（ifapplicable）

配置项hidden和disabled到这步生效

9.所有状态感知的事件初始化（如果有的话）Anystate-specificeventsareinitialized（ifapplicable）

状态感知的组件可由事件声明特殊加载和保存状态。

如支持，加入此类的事件。

4.1.1.3销毁过程Destruction

1.触发beforedesroy事件Thebeforedestroyeventisfired

这是个可取消的事件，指定的handler可阻止组件被销毁。

2.调用了beforeDestroy方法ThebeforeDestroymethodiscalled

这是另外一个实现或重写预定销毁逻辑的模板方法。

每个子类应调用superclass.beforeDestroy。

3.元素及其侦听器被移除Elementanditslistenersareremoved

若组件是渲染好的，所属的元素的事件侦听器会被移除和元素本身会从DOM那里移除。

4.调用了onDestroy方法TheonDestroymethodiscalled

这是另外一个实现或重写特定所需的“后销毁”逻辑的模板方法。

每个子类应调用superclass.onDestroy。

注意容器类（Containerclass，和一切容器的子类）提供了一个默认的onDestroy实现，自动遍历其items集合里的每一项，分别地执行子组件身上的destroy方法。

5.在组件管理器中撤销组件对象的登记ComponentisunregisteredfromComponentMgr

I使得不能再从Ext.getCmp获取组件对象

6.触发destroy事件Thedestroyeventisfired

这是组件成功销毁的一个简单通知。

此时组件已经DOM中已是没有的了

组件上的事件侦听器被移除EventlistenersontheComponentareremoved

组件本身可允许从所属的元素得到事件侦听器。

如有的话，连同删除。

4.1.2组件的X类型XTypes

XTypes是Ext2.0中新的概念，被认为是Ext组件的特定类型。

可用的xtype摘要可在Component类API开始的地方找到。

与一般JavaScript对象用法相似，XTypes可用于查找或比较组件对象，如isXType和getXType的方法。

你亦可以列出任意组件的xtpye层次表，用方法getXTypes。

然而，如何把Xtypes用于优化组件的创建和渲染过程才是XTypes发挥威力的地方。

通过指定一个xtype的配置对象的写法，可隐式声明的方式创建组件，使得如果没有渲染的需要就只是一个对象而免去实例化的步骤，这时不仅渲染的动作是延时的，而且创建实际对象的这一步也是延时的，从而节省了内存和资源。

在复杂的布局中，这种性能上的改进尤为明显。

//显式创建所容纳的组件

varpanel=newExt.Panel（{

...

items:

[

newExt.Button（{

text:

'OK'

}）

]

};

//使用xtype创建

varpanel=newExt.Panel（{

...

items:

[{

xtype:

'button',

text:

'OK'

}]

};

第一个例子中，面板初始化的同时，按钮总是会立即被创建的。

如果加入较多的组件，这种方法很可能界面的渲染速度。

第二例子中，按钮直到面板真正在浏览器上显示才会被创建和渲染。

如果面板从未显示（例如有个tab一直是隐藏的），那么按钮就不会被创建，不会消耗任何资源了。

4.1.3BoxComponent

BoxComponent是另外一个重要的基类，该类从组件Component扩展，为任何要进行可视渲染和参与布局的组件提供了一致的、跨浏览器的箱子模型（BoxModel）实现。

BoxComponent负责调节大小和定位，自动处理各浏览器之间的差异，如外/内补丁、边框的问题，形成一个统一的箱子模型，以支持各种浏览器。

2.0的一切容器类（container）扩展自BoxComponent

4.2容器模型ContainerMode

容器Container

一个组件如果有包含其它的组件，那么，容器Container便是这个组件奠基之石。

该类提供了布局方面和调节大小、嵌套组所需的逻辑，并且提供一个基础性的加入组件协调机制。

容器类不应该直接使用，其目的在于为一切可视的容器组件提供一个基类。

面板Panel

面板Panel是2.0最常用的容器，90％布局任务都离不开面板。

面板用在排版布局上，如同一张白纸，完全是空白的矩形，没有可视内容。

虽然这样，面板也提供了一些预留区域，方便加入程序所需的UI界面，包括顶部或底部的工具条、菜单栏、头部区域、底部区域和躯干区域。

同时内建可展开和可收缩行为的按钮，和其它不同任务预设的按钮。

面板可轻松地下降到任意的容器或布局，当中定位或渲染的逻辑全部由Ext调控，

下列是Ext2.0面板最主要的几个子类：

GridPanel

TabPanel

TreePanel

FormPanel

Window

Window是一种可浮动的、可最小/最大化的、可复原的、可拖动的..等此类的特殊面板。

其目的在于实现一种具有桌面风格的程序界面的基类，像Ext桌面演示看到的那样。

视图区Viewport

视图区Viewport是以document.body作容器的实用类，它会与浏览器视图自适应尺寸，是全屏幕应用的基础，如浏览器大小调节、布局重新计算的问题由该类自动完成。

注意视见区Viewport除了document.body不能渲染在其它的容器上，所以一个页面只能有一个视图区。

目前eVoice中主页的主容器即为此容器。

4.3布局Layouts

布局概述

Ext2.3LayoutClassHierarchy

布局是Ext2系列中最具意义的改进之一，在创建优雅的程序布局时感受到易用性或灵活性方面带来的好处，共有10种风格的布局管理器，分别提供构建各种可能的程序布局基础。

Ext调控了布局诸如size、定位、滚动条和其他的属性方面的问题，一如既往地简单，开箱即用。

在容器也可无限嵌套布局、混合其他不同风格的布局。

布局由容器内置创建，所以布局不应通过关键字new实例化这种方式直接使用。

有一种内部的机制，容器与布局能够很好地协调工作—只需配置好相关的参数，容器就会委托其负责的布局类工作。

创建容器的时候，你应选定一种布局的风格以及相关的配置，这两个配置是属性layout和属性layoutConfig。

举例：

varpanel=newPanel（{

title:

'MyAccordion',

layout:

'accordion',//在这个面板中所使用的布局样式

layoutConfig:

{

animate:

true//布局指定的配置项写在这里

}

//其他Panel的选项

}）;

当你创建嵌套布局时，明白面板包含其他面板是很重要的，布局中的每个面板必须指定一个布局管理器。

多数情况你不需要指定布局的风格如“border”或“accordion”，较常见的是“fit”那一种，会自动调整大小自适应它的容器。

如果你不指定某个布局管理器，默认的是ContainerLayout类，不过这样很可能导致一些意料不到的情况发生，所以最好精确声明一下。

每种布局类都支持其特定的配置选项。

关于布局每种配置选项可参考API文档。

布局管理器LayoutManagers

ContainerLayout

其它一切布局管理器的基类，容器若不指定某个布局管理器，则默认的管理器就是这个ContainerLayout。

ContainerLayout没有任何的外观表示—其主要的职责是容纳子项目、控制渲染和一些常见任务，如调节大小缓冲（resizebuffering）。

ContainerLayout常用于扩展制定的布局，很少实例化直接使用。

详细在API参考.

CardLayout

CardLayout将容器中的每个组件当作一个卡片来处理。

在某一时间，只有一个卡片是可见的，容器象一个卡片堆栈一样工作。

大多数的情况，用于向导（Wizards），制定的tab实现或其它多页面信息的场合。

参阅API参考。

AbsoluteLay