《ext教程_java快车》由会员分享,可在线阅读,更多相关《ext教程_java快车(64页珍藏版)》请在金锄头文库上搜索。
1、Java快车基础培训教材 TEL:01062972039 第章第章Ext 简介简介Ext是一个 Ajax框架,是一个用 javascript 编写的,用于在客户端创建丰富多彩的 web应用程序界面。Ext可以用来开发 RIA(即富客户端)的 AJAX 应用。 Ext 最开始基于GUI 技术,由开发人员 Jack Slocum 开发,通过参考 Java Swing 等机制来组织可视化组件,无论从 UI 界面上 CSS 样式的应用,到数据解析上的异常处理,都可算是一 款不可多得的 JavaScript 客户端技术的精品。 1Java快车基础培训教材 TEL:01062972039 第章第章Ex
2、t 入门入门. 获得获得Ext 要使用 Ext,那么首先要得到 Ext 库文件,该框架是一个开源的,可以直接从官方网站下载, 网址 http:/ 用的 3.1 版本。 单击上图中的【Download 】超链接进行下载,把下载得到的ZIP 压缩文件解压,可以得到 如图所示的内容。 adapter为:第三方底层库提供服务,包括 Ext 自带的底层库、 jQuery、 Prototype 和 YUI的适配器。docs:API 帮助文档,开发中必须要看的。exmaples:官方的演示示例,初学者的入门途径。pkgs:是 EXT压缩后的代码,经过压缩的代码,体积更小,加载更快resources:Ext
3、UI资源文件目录,如 CSS、图片文件都存放在这里面。src:无压缩 Ext 全部的源码(里面分类存放) 遵从 Lesser GNU(LGPL)开源的协议。Ext-all.js:压缩后的 Ext 全部源码。ext-all-debug.js:无压缩的 Ext 全部的源码(用于调试)。2Java快车基础培训教材 TEL:01062972039 . 应用 应用 Ext应用 ext 需要在页面中引入 ext 的样式及 ext 库文件,样式文件为 resources/css/ ext-all.css,ext 的 js 库文件主要包含两个:adapter/ext/ext-base.js 及 ext- a
4、ll.js,其中 ext-base.js 表示框架基础库,ext-all.js 是 ext 的核心库。adapter 表示适配器,也就是说可以有多种适配器,因此,可以把 adapter/ext/ext-base.js 换成 adapter/jquery/ext-jquery-adapter.js 或 adapter/prototype/ext-prototype- adapter.js等。因此,要使用Ext 框架的页面中一般包括下面几句:在 Ext 库文件及页面内容加载完后,Ext 会执行 Ext.onReady 中指定的函数,因此可以 用,一般情况下每一个用户的 Ext 应用都是从 Ext.
5、onReady 开始的,使用 Ext 应用程序的代 码大致如下: function fn()alert(“ExtJS库已加载“);Ext.onReady(fn);fn也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式: Ext.onReady(function fn()alert(“ExtJS库已加载“););下面展示一个 Ext的消息框:Ext.onReady(function()Ext.MessageBox.alert(“hello“,“HelloWorld“););效果图取下:3Java快车基础培训教材 TEL:01062972039 进一步,我们可以在页面上显示一个窗口,
6、代码如下:Ext.onReady(function()var win=new Ext.Window(title:“hello“,width:300,height:200,html:Hello,easy open source);win.show(););在浏览页面,即可得在屏幕上显示一个窗口,如图所示: 4Java快车基础培训教材 TEL:01062972039 第章第章Ext 框架基础及核心简介 框架基础及核心简介 . Ext 类库简介 类库简介 Ext 由一系列的类库组成,一旦页面成功加载了 Ext 库后,我们就可以在页面中通过 javascript 调用 Ext 的类及控件来实现需要的
7、功能。Ext 的类库由以下几部分组成: 底层 API(core):底层 API 中提供了对 DOM 操作、 查询的封装、 事件处理、 DOM 查询器等基础的功能。其它控件都是建立在这些底层 api 的基础上,底层 api 位于源代码目录的 core 子目录中,包括 DomHelper.js、Element.js 等文件,如图所示。控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、 树、 窗口、 菜单、 工具栏、 按钮等等,在我们的应用程序中可以直接通过应用这些控件来 实现友好、 交互性强的应用程序的 UI。 控件位于源代码目录的 widgets 子目录中
8、,包含 如图所示。5Java快车基础培训教材 TEL:01062972039 实用工具 Utils:Ext 提供了很多的实用工具,可以方便我们实现如数据内容格式化 、 JSON数据解码或反解码、 对 Date、 Array、 发送 Ajax 请求、 Cookie 管理、 CSS 管理等扩展等功能,如图所示:6Java快车基础培训教材 TEL:01062972039 . Ext的组件 的组件 从Ext2.0开始就对框架进行了非常大的重构,其中最重要的就是形成了一个结构及层次分明的组 件体系,由这些组件形成了 Ext 的控件,Ext 组件是由 Component 类定义,每一种组 件都有一个指
9、定的 xtype 属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型 的组件。 Ext 中的组件体系由下图所示:. 组件的使用 组件的使用 组件可以直接通过 new 关键子来创建,比如控件一个窗口,使用 new Ext.Window(), 创建一个表格则使用 new Ext.GridPanel()。 当然,除了一些普通的组件以外,一般都会在构 造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性及值 组件根据构造函数中的参数属性值来初始化组件。比如下面的例子:Ext.onReady(function()var obj=tit
10、le:“hello“,width:300,height:200,html:Hello,easy open source;var panel=new Ext.Panel(obj); panel.render(“hello“););运行上面的代码可以实现如下图所示的结果:7Java快车基础培训教材 TEL:01062972039 可以省掉变量 obj,直接写成如下的形式: Ext.onReady(function()var panel=new Ext.Panel(title:“hello“,width:300,height:200,html:Hello,easy open source);pan
11、el.render(“hello“););render 方法后面的参数表示页面上的 div 元素 id,也可以直接在参数中通过 renderTo 参数来省略手动使用 render 方法,只需要在构造函数的参数中添加一个 renderTo 属性即可, 如下:Ext.onReady(function()var panel=new Ext.Panel(renderTo:“hello“,title:“hello“,width:300,height:200,html:Hello,easy open source);panel.show(););8Java快车基础培训教材 TEL:01062972039
12、 对于容器中的子元素组件,都支持延迟加载的方式创建控件,此时可以直接通过在需要父组 件的构造函数中,通过给属性 items 传递数组方式实现构造。如下面的代码:Ext.onReady(function()var panel=new Ext.TabPanel(width:300,height:200,items:title:“面板1“,height:30,html:Hello1,title:“面板2“,height:30,html:Hello2,title:“面板3“,height:30,html:Hello3);panel.render(“hello“);panel.show(););注意中括
13、号中加粗部份的代码,这些代码定义了 TabPanel 这个容器控件中的子元素,这里 包括三个面板。上面的代码与下面的代码等价:Ext.onReady(function()var panel=new Ext.TabPanel(width:300,height:200,items:new Ext.Panel(title:“面板1“,height:30),new Ext.Panel(title:“面板2“,height:30),9Java快车基础培训教材 TEL:01062972039 new Ext.Panel(title:“面板3“,height:30);panel.render(“hello
14、“););前者不但省略掉了 new Ext.Panel 这个构造函数,最重要前者只有在初始化 TabPanel 的时候,才会创建子面板,而第二种方式则在程序一开始就会创建子面板。也就是说,前者实现 的延迟加载延迟加载。. 组件的配置属性 组件的配置属性 在 Ext 中,除了一些特殊的组件或类以外,所有的组件在初始化的时候都可以在构造函数 使用一个包含属性名称及值属性名称及值的对象,该对象中的信息也就是指组件的配置属性。 比如配置一个面 板:new Ext.Panel(title:“面板“, html“面板内容“, height:100);再比如创建一个按钮:var b=new Ext.Button(text:“添加“, pressed:true, 10Java快车基础培训教材 TEL:01062972039 heigth:30, handler:Ext.emptyFn);再比如创建一个 Viewport实现页面布局:Ext.onReady(function()n