ExtJS实用开发指南Word文档下载推荐.docx
- 文档编号:5232475
- 上传时间:2023-05-04
- 格式:DOCX
- 页数:118
- 大小:1.84MB
ExtJS实用开发指南Word文档下载推荐.docx
《ExtJS实用开发指南Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《ExtJS实用开发指南Word文档下载推荐.docx(118页珍藏版)》请在冰点文库上搜索。
(wlr的blog应用)
-3-
(ExtJS的表格控件)
(不同主题的ExtJS弹出框效果)
ExtJS是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的
前端ajax框架。
ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing
等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,
都可算是一款不可多得的JavaScript客户端技术的精品。
-4-
第二章、开始
2.12.12.1
2.1
获得
要使用ExtJS,那么首先要得到ExtJS库文件,该框架是一个开源的,可以直接从官方
网站下载,网址
可以选择选择1.1或2.0版本,本教程使用的2.0版本。
图1-1ExtJs不同版本下载选择页面
单击上图中的【Downloadext-2.0.zip】超链接进行下载,把下载得到的ZIP压缩文件解
压缩到【D:
\ExtCode】目录下,可以得到如如图1-2所示的内容。
图1-2ExtJS发布包目录
adapter:
负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持
的底层库。
build:
压缩后的ext全部源码(里面分类存放)。
docs:
API帮助文档。
exmaples:
提供使用ExtJs技术做出的小实例。
resources:
ExtUI资源文件目录,如CSS、图片文件都存放在这里面。
source:
无压缩Ext全部的源码(里面分类存放)遵从LesserGNU(LGPL)开源的
协议。
-5-
Ext-all.js:
压缩后的Ext全部源码。
ext-all-debug.js:
无压缩的Ext全部的源码(用于调试)。
ext-core.js:
压缩后的Ext的核心组件,包括sources/core下的所有类。
ext-core-debug.js:
无压缩Ext的核心组件,包括sources/core下的所有类。
2.22.22.2
2.2
、应用
应用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库文件及页面内容加载完后,ExtJS会执行Ext.onReady中指定的函数,因此
可以用,一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的,使用ExtJS应用
程序的代码大致如下:
fn也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:
<
scripttype="
text/javascript"
src="
extjs/adapter/ext/ext-base.js"
>
/script>
extjs/ext-all.js"
script>
functionfn()
{
alert(‘ExtJS库已加’);
}
Ext.onReady(fn);
alert(‘ExtJS库已加载!
’);
Ext.onReady(function()
);
-6-
2.32.32.3
2.3
、
版的
HelloWorldHelloWorldHelloWorld
HelloWorld
下面我们写一个最简单的ExtJS应用,在hello.html文件中输入下面的代码:
图1-11hello.html页面效果
进一步,我们可以在页面上显示一个窗口,代码如下:
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
ExtJS<
/title>
linkrel="
stylesheet"
type="
text/css"
href="
extjs/resources/css/ext-all.css"
Ext.MessageBox.alert("
hello"
"
Hello,easyjfopensource"
});
/head>
body>
/body>
/html>
-7-
在浏览hello.html,即可得在屏幕上显示一个窗口,如图xxx所示。
第三章
ExtExtExt
Ext
框架基础及核心简介
3.13.13.1
3.1
类库简介
ExtJS由一系列的类库组成,一旦页面成功加载了ExtJS库后,我们就可以在页面中通
过javascript调用ExtJS的类及控件来实现需要的功能。
ExtJS的类库由以下几部分组成:
varwin=newExt.Window({title:
"
width:
300,height:
200,html:
'
h1>
Hello,easyjfopensource<
/h1>
win.show();
-8-
底层API(core):
底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询
器等基础的功能。
其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的
core子目录中,包括DomHelper.js、Element.js等文件,如图xx所示。
控件(widgets):
控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、
表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控
件来实现友好、交互性强的应用程序的UI。
控件位于源代码目录的widgets子目录中,包含
如图xx所示。
-9-
实用工具Utils:
Ext提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON
数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功
能,如图所示:
3.23.23.2
3.2
的组件
Ext2.0对框架进行了非常大的重构,其中最重要的就是形成了一个结构及层次分明的组
件体系,由这些组件形成了Ext的控件,Ext组件是由Component类定义,每一种组件都有
一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组
件。
ExtJS中的组件体系由下图所示:
-10-
组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件。
基本组件有:
xtypeClass
boxExt.BoxComponent具有边框属性的组件
ButtonExt.Button按钮
colorpaletteExt.ColorPalette调色板
componentExt.Component组件
containerExt.Container容器
cycleExt.CycleButton
dataviewExt.DataView数据显示视图
datepickerExt.DatePicker日期选择面板
editorExt.Editor编辑器
editorgridExt.grid.EditorGridPanel可编辑的表格
-11-
3.33.33.3
3.3
、组件的使用
组件可以直接通过new关键子来创建,比如控件一个窗口,使用newExt.Window(),
创建一个表格则使用newExt.GridPanel()。
当然,除了一些普通的组件以外,一般都会在构
造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性
及值,组件根据构造函数中的参数属性值来初始化组件。
比如下面的例子:
gridExt.grid.GridPanel表格
pagingExt.PagingToolbar工具栏中的间隔
panelExt.Panel面板
progressExt.ProgressBar进度条
splitbuttonExt.SplitButton可分裂的按钮
tabpanelExt.TabPanel选项面板
treepanelExt.tree.TreePanel树
viewportExt.ViewPort视图
windowExt.Window窗口
工具栏组件有
toolbarExt.Toolbar工具栏
tbbuttonExt.Toolbar.Button按钮
tbfillExt.Toolbar.Fill文件
tbitemExt.Toolbar.Item工具条项目
tbseparatorExt.Toolbar.Separator工具栏分隔符
tbspacerExt.Toolbar.Spacer工具栏空白
tbsplitExt.Toolbar.SplitButton工具栏分隔按钮
tbtextExt.Toolbar.TextItem工具栏文本项
表单及字段组件包含
formExt.FormPanelForm面板
checkboxExt.form.Checkboxcheckbox录入框
comboExt.form.ComboBoxcombo选择项
datefieldExt.form.DateField日期选择项
fieldExt.form.Field表单字段
fieldsetExt.form.FieldSet表单字段组
hiddenExt.form.Hidden表单隐藏域
htmleditorExt.form.HtmlEditorhtml编辑器
numberfieldExt.form.NumberField数字编辑器
radioExt.form.Radio单选按钮
textareaExt.form.TextArea区域文本框
textfieldExt.form.TextField表单文本框
timefieldExt.form.TimeField时间录入项
triggerExt.form.TriggerField触发录入项
-12-
运行上面的代码可以实现如下图所示的结果:
可以省掉变量obj,直接写成如下的形式:
render方法后面的参数表示页面上的div元素id,也可以直接在参数中通过renderTo参
数来省略手动谳用render方法,只需要在构造函数的参数中添加一个renderTo属性即可,
如下:
对于容器中的子元素组件,都支持延迟加载的方式创建控件,此时可以直接通过在需要
父组件的构造函数中,通过给属性items传递数组方式实现构造。
如下面的代码:
注意中括号中加粗部份的代码,这些代码定义了TabPanel这个容器控件中的子元素,
varobj={title:
Hello,easyjfopensource'
};
varpanel=newExt.Panel(obj);
panel.render("
divid="
&
nbsp;
/div>
varpanel=newExt.Panel({title:
NewExt.Panel({renderTo:
title:
Hello,easyjfopensource
varpanel=newExt.TabPanel({width:
200,items:
[{title:
面板1"
height:
30},{title:
面板
2"
面板3"
30}]});
-13-
这里包括三个面板。
上面的代码与下面的代码等价:
前者不但省略掉了newExt.Panel这个构造函数,最重要前者只有在初始化TabPanel的
时候,才会创建子面板,而第二种方式则在程序一开始就会创建子面板。
也就是说,前者实
现的延迟加载。
3.43.43.4
3.4
、组件的配置属性
在ExtJS中,除了一些特殊的组件或类以外,所有的组件在初始化的时候都可以在构造
函数使用一个包含属性名称及值的对象,该对象中的信息也就是指组件的配置属性。
比如配置一个面板:
再比如创建一个按钮:
[newExt.Panel({title:
30}),new
Ext.Panel({title:
面板2"
30}),newExt.Panel({title:
30})]});
newExt.Panel({
title:
面板"
html"
面板内容"
height:
100}
-14-
再比如创建一个Viewport及其中的内容:
每一个组件除了继承基类中的配置属性以外,还会根据需要增加自己的配置属性,另外
子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。
学习及使用ExtJS,
其中最关键的是掌握ExtJS中的各个组件的配置属性及具体的含义,这些配置属性在下载下
来的ExtJS源码文档中都有详细的说明,可以通过这个文档详细了解每一个组件的特性,
如下图所示:
varb=newExt.Button({
text:
添加"
pressed:
true,
heigth:
30,
handler:
Ext.emptyFn
newExt.Viewport({
layout:
border"
items:
[{region:
north"
html:
100},
{region:
center"
xtype:
grid"
学生信息管理"
store:
troe,
cm:
colM,
store,
autoExpandColumn:
3
]
-15-
由于所有的组件都继承自Ext.Component,因此在这里我们列出组件基类Component中
的配置属性简单介绍。
配置属
性名称
类型简介
allowDoallowDoallowDo
allowDo
mMovemMovemMove
mMove
Boolea
n
当渲染这个组件时是否允许移动Dom节点(默认值为true)。
applyToapplyToapplyTo
applyTo
Mixed混合参数,表示把该组件应用指定的对象。
参数可以是—节点的id,
一个DOM节点或一个存在的元素或与之相对应的在document中已出现
的id。
当使用applyTo,也可以提供一个id或CSS的class名称,如果子组
件允许它将尝试创建一个。
如果指写applyTo选项,所有传递到renderTo
方法的值将被忽略,并且目标元素的父节点将自动指定为这个组件的容
器。
使用applyTo选项后,则不需要再调用render()方法来渲染组件。
autoShoautoShoautoSho
autoSho
www
w
自动显示,如为true,则组件将检查所有隐藏类型的class(如:
’x-hidden’
或’x-hide-display’并在渲染时移除(默认为false)。
clsclscls
cls
String给组件添加额外的样式信息,(默认值为'
),如果想自定义组件或它的
子组件的样式,这个选项是非常有用的。
ctClsctClsctCls
ctCls
String给组件的容器添加额外的样式信息,默认值为'
)。
disableddisableddisabled
disabled
ClassClassClass
Class
String给被禁用的组件添加额外的CSS样式信息,(默认为"
x-item-disabled"
hideMohideMohideMo
hideMo
dedede
de
String组件的隐藏方式,支持的值有’visibility’,也就是css里的
visibility,’offsets’负数偏移位置的值和’display’也就是css里的display,
默认值为’display’。
hideParhideParhidePar
hidePar
ententent
ent
是否隐藏父容器,该值为true时将会显示或隐藏组件的容器,false时则
只隐藏和显示组件本身(默认值为false)。
ididid
id
String组件的id,默认为一个自动分配置的id。
listenerslistenerslisteners
listeners
Object给对象配置多个事件监听器,在对象初始化会初始化这些监听器。
pluginspluginsplugins
plugins
Object/一个对象或数组,将用于增加组件的自定义功能。
一个有效的组件插
-16-
关于ExtJS中组件的详细使用说明,包括Component的属性Properties、方法及事件详细,请参考
中的VIP文档《ExtJS组件Component详解
(1)、
(2)》。
3.53.5
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtJS 实用 开发 指南