《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
