您的位置：首页 > 其它

Ext框架基础及核心简介

2011-05-18 11:29 197 查看
转载自 hi_suny

ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富
客户端的AJAX应用，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

获得ExtJS

要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址
http://extjs.com/download
，进入下载页面可以看到大致如下所示的界面，可以选择选择1.1或2.0版本。



应用ExtJS

　　

应用extjs需要在页面中引入extjs的样式及extjs库文件，样式
文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及
ext-all.js，其中ext-base.js表示框架基础库，ext-
all.js是extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js

换成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-
adapter.js等

核心简介

　　ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过
javascript调用ExtJS的类及控件来实现需要的功能。ExtJS的类库由以下几部分组成：底层API(core)：底层API中提供了对
DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录
中，包括DomHelper.js、Element.js等文件，如图xx所示。



　　控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜
单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets子目录
中，包含如图xx所示。



　　实用工具Utils：Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能，如图所示：



ExtJS的组件

　　Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成
了Ext的控件，Ext组件是由
Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。

ExtJS中的组件体系由下图所示：



组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。

基本组件有:

xtype Class

------------- ------------------

box Ext.BoxComponent 具有边框属性的组件

button Ext.Button　　按钮

colorpalette Ext.ColorPalette 调色板

component Ext.Component　组件

container Ext.Container　容器

cycle Ext.CycleButton　

dataview Ext.DataView 数据显示视图

datepicker Ext.DatePicker 日期选择面板

editor Ext.Editor　编辑器

editorgrid Ext.grid.EditorGridPanel 可编辑的表格　

grid Ext.grid.GridPanel 表格

paging Ext.PagingToolbar 工具栏中的间隔

panel Ext.Panel　面板

progress Ext.ProgressBar 进度条

splitbutton Ext.SplitButton 可分裂的按钮

tabpanel Ext.TabPanel　选项面板

treepanel Ext.tree.TreePanel 树

viewport Ext.ViewPort 视图

window Ext.Window　窗口

工具栏组件有

---------------------------------------

toolbar Ext.Toolbar　工具栏

tbbutton Ext.Toolbar.Button　按钮

tbfill Ext.Toolbar.Fill　文件

tbitem Ext.Toolbar.Item　工具条项目

tbseparator Ext.Toolbar.Separator　工具栏分隔符

tbspacer Ext.Toolbar.Spacer　工具栏空白

tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮

tbtext Ext.Toolbar.TextItem　工具栏文本项

表单及字段组件包含：

---------------------------------------

form Ext.FormPanel　Form面板　

checkbox Ext.form.Checkbox　checkbox录入框

combo Ext.form.ComboBox　combo选择项

datefield Ext.form.DateField　日期选择项

field Ext.form.Field　表单字段

fieldset Ext.form.FieldSet　表单字段组

hidden Ext.form.Hidden 表单隐藏域

htmleditor Ext.form.HtmlEditor　html编辑器

numberfield Ext.form.NumberField　数字编辑器

radio Ext.form.Radio　单选按钮

textarea Ext.form.TextArea　区域文本框

textfield Ext.form.TextField　表单文本框

timefield Ext.form.TimeField　时间录入项

trigger Ext.form.TriggerField　触发录入项

组件的使用

　　组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。

组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：

<head>

<script>


var obj={title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'};

var panel=new Ext.Panel(obj);

panel.render("hello");

</script>

</head>

<body>

<div id="hello"></div>

</body>

可以省掉变量obj，直接写成如下的形式：

var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});

panel.render("hello");

render方法后面的参数表示页面上的div元素id，也可以直接在参数中通过renderTo参数来省略手动谳用render方法，只需要在构造函数的参数中添加一个renderTo属性即可，如下：

new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});

对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中，通过给属性items传递数组方式实现构造。如下面的代码：

var panel=new Ext.TabPanel({width:300,height:200,items:[

{title:"面板1",height:30},{title:"面板2",height:30},{title:"面板3",height:30}]});

上面的代码与下面的代码等价：

var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel(

{title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]

});


前者不但省略掉了new Ext.Panel这个构造函数，最重要前者只有在初始化TabPanel的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说，前者实现的延迟加载。

组件的配置属性

在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。

每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。学习及使用ExtJS，


中最关键的是掌握ExtJS中的各个组件的配置属性及具体的含义，这些配置属性在下载下来的ExtJS源码文档中都有详细的说明，可以通过这个文档详细了解每一个组件的特性

由于所有的组件都继承自Ext.Component，因此在这里我们列出组件基类Component中的配置属性简单介绍。


配置属性名称

类型

简介


allowDomMove

Boolean

当渲染这个组件时是否允许移动Dom节点（默认值为true）。


applyTo

Mixed

混合参数，表示把该组件应用指定的对象。参数可以是—节点的id，一个DOM节点或一个存在的元素或与之相对应的在document中已出现的id。

当使用 applyTo，也可以提供一个id或CSS的class名称，如果子组件允许它将尝试创建一个。如果指写applyTo选项，所有传递到 renderTo方法的值将被忽略，并且目标元素的父节点将自动指定为这个组件的容器。使用applyTo选项后，则不需要再调用render()方法来渲染组件。


autoShow

Boolean

自动显示，如为true，则组件将检查所有隐藏类型的class（如：’x-hidden’ 或’x-hide-display’并在渲染时移除(默认为false)。


cls

String

给组件添加额外的样式信息，（默认值为''），如果想自定义组件或它的子组件的样式，这个选项是非常有用的。


ctCls

String

给组件的容器添加额外的样式信息，默认值为'')。


disabledClass

String

给被禁用的组件添加额外的CSS样式信息，（默认为"x-item-disabled"）。


hideMode

String

组件的隐藏方式，支持的值有’visibility’，也就是css里的visibility，’offsets’负数偏移位置的值和’display’也就是css里的display，默认值为’display’。


hideParent

Boolean

是否隐藏父容器，该值为true时将会显示或隐藏组件的容器，false时则只隐藏和显示组件本身（默认值为false）。


id

String

组件的id，默认为一个自动分配置的id。


listeners

Object

给对象配置多个事件监听器，在对象初始化会初始化这些监听器。


plugins

Object/Array

一个对象或数组，将用于增加组件的自定义功能。一个有效的组件插件必须包含一个init方法，该方法可以带一个Ext.Component类型参数。当组件建立后，如果该组件包含有效的插件，将调用每一个插件的init方法，把组件传递给插件，插件就能够实现对组件的方法调用及事件应用等，从而实现对组件功能的扩充。


renderTo

Mixed

混合数据参数，指定要渲染到节点的id，一个DOM的节点或一个已存在的容器。如果使用了这个配置选项，则组件的render()就不是必需的了。


stateEvents

Array

定义需要保存组件状态信息的事件。当指定的事件发生时，组件会保存它的状态（默认为none），其值为这个组件支持的任意event类型，包含组件自身的或自定义事件。（例如：[‘click’,’customerchange’]）。


stateId

String

组件的状态ID，状态管理器使用该id来管理组件的状态信息，默认值为组件的id。


style

String

给该组件的元素指定特定的样式信息，有效的参数为

Ext.Element.applyStyles

中的值。


xtype

String

指定所要创建组件的xtype，用于构造函数中没有意义。该参数用于在容器组件中创建创建子组件并延迟实例化和渲染时使用。如果是自定义的组件，则需要用Ext.ComponentMgr.registerType来进行注册，才会支持延迟实例化和渲染。


el

Mixed

相当于applyTo
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航