ext入门总结.doc

ExtJs 学习 Author: 石恺元 datetime: 2010-11-24一 Ext简介 ExtJS 是一种优秀的Ajax框架，可以用来开发带有华丽外观的RIAlto(富客户端)的Ajax应用， 使得我们的B/S应用更加具有活力。由于他是一种用JavaScript编写，与后台技术无关的前端Ajax 框架因此，可以把ExtJS用在.net,java,php等多种开发语言中。Ext使用做出来的东西很像桌面程序 ExtJS开始基于YUI技术，由开发人员jack Slocum 开发，通过参考Java Swing等机制来组织可 视化组件，无论从UI界面上CSS样式,数据解析上的异常处理Ext都很优秀。 要使用ExtJs，那么首先要得到ExtJx文库文件,该框架是一个开源的，可以直接从官方网站上 下载网址是 /products/js/download.php然后根据提示进入下载页面。二 准备工作需要三个工具：1. ExtJs的主程序包 2.AdobeAIR 是Abode的一个支持工具 3.（必须先安装adoair然后才能装这个，ext的视API，会创建一个桌面图标，很好看的一个工具）三 核心包打开ext2.3核心包有以下内容：adaper: 负责第三方提供的底层库(包括Ext自带的底层库)映射为Ext所支持的底层库 buile : 压缩后ext全部的源码(里面分类存放).docs : API帮助文档（这个文档需要一个adobe的一个工具）exmaples: 提供使用ExtJs 的例子resources: Ext UI 资源文件目录，如CSS，图片等。source : 无压缩Ext全部的源码(里面分类存放)遵从Lesser GNU (LGPL)开源协议。ext-all.js :压缩后ext的全部源码。ext-all-debug.js : 无压缩ext的全部源码用于调试ext-core.js : 压缩后Ext的核心组件，包括source/core 下的所以类ext-core-debug.js : 无压缩Ext核心组件，包括source/core下的所有类【注: 压缩的源码实际上就是把源码无换行，无空格，所以源程序在一行】我们要用到的文件： 样式文件：ressources/css/ext-all.css ext文库主要有两个：adapter/extext-base.js以及ext-all.js,其中ext-base.js表示基础包，ext-all.js表示核心库（appdaper表示配置器，也就是说可以有多种配置器也就是说用其他几个也行）。在项目里面放的时候放三个包就可以了：Apapter ，resources , ext-all-debug因此，使用ExtJS框架的页面一般包括下面几句： 四 开始燃烧的远征1. hello world!第一个ext程序- New Document /用浏览器自带的alert对话框加载一个事件Ext.onReady(function() alert(hello world! ext库已经加载(这是浏览器自带的比较不好看); ); /这里调用了浏览器的alert框（不太好看）2. 用ext的方messageBox做一个漂亮的alert框关于MessageBox 我们可以查看帮助下面做一个好看的ext alert 框： New Document /用ext的MessageBox组件进行一个alert框Ext.onReady(function()Ext.MessageBox.alert(卡卡西,Extjs欢迎你);); /利用Ext的MessageBox弹出一个alert框这个就比较好看了下面我们在来做一个可以改变大小的窗体： /我们可以在页面上显示一个窗口(而且这个窗体你可以拖动它的大小) Ext.onReady(function()var win = new Ext.Window(title:sky,width:100,height:200,html:Hello,opensource!,);/joson的对象win.show();); win.show(); ) /显示一个好看的窗体并且可以改变他的大小3. 用两个一个遮住另一个 /把alert 和 小窗口放在一起，一个遮住一个 Ext.onReady(function() Ext.MessageBox.alert(Status,Changes saved successfully.);/alert框 var win = new Ext.Window( title:hello, width:300, hidth:200, html:Hello,卡卡西 ); win.show(); ); 4. s五 Extde 组成Ext由一系列的类库组成，一旦也米昂成功加载了ExtJs库后，我们就能在页面中通过javascript 用ExtJS的类及控件来实现需要的功能.ExtJS的类库由以下几部分组成：(1.底层API（core）， 2.控件(widgets), 3.实用工具 Utils )1. 底层API（core） 底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录中，包括DomHelper.js、Element.js等文件2. 控件(widgets) 控件是指可以直接在页面中创建的可视化组件，比如面板、选项板（面板上再放面板）、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI（用户界面）3. 实用工具Utils Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能六 Ext的组件体系1 组件的构成 组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件 基本组件：xtype Class- -box Ext.BoxComponent 具有边框属性的组件button Ext.Button按钮colorpalette Ext.ColorPalette 调色板component Ext.Component组件container Ext.Container容器cycle Ext.CycleButtondataview 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窗口 工具栏组件toolbarExt.Toolbar工具栏tbbuttonExt.Toolbar.Button按钮tbfill Ext.Toolbar.Fill文件tbitem Ext.Toolbar.Item工具条项目tbseparator Ext.Toolbar.Separator工具栏分隔符tbspacerExt.Toolbar.Spacer工具栏空白tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮tbtext Ext.Toolbar.TextItem工具栏文本项 表单及字段组件 form Ext.FormPanelForm面板checkbox Ext.form.Checkboxcheckbox录入框combo Ext.form.ComboBoxcombo选择项datefield Ext.form.DateField日期选择项field Ext.form.Field表单字段fieldset Ext.form.FieldSet表单字段组hidden Ext.form.Hidden 表单隐藏域htmleditor Ext.form.HtmlEditorhtml编辑器numberfield Ext.form.NumberField数字编辑器radio Ext.form.Radio单选按钮textarea Ext.form.TextArea区域文本框textfield Ext.form.TextField表单文本框timefield Ext.form.TimeField时间录入项trigger Ext.form.TriggerField触发录入项2 创建组件组件可以直接通过new关键子来创建，比如创建一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。一般都会在构造函数中通过传递构造参数（Json格式的）来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件3 创建组件的例子 a) 第一个一个panel窗口 /组件的使用可以用new 关键字 Ext.onReady(function() var panel = new Ext.Panel( title:hello, width:300, height:200, html:Hello,卡卡 ) panel.render(hello); ); 我的地盘我做主 b) 标签菜单的/多级子菜单 /多个菜单的导航 Ext.onReady(function() var panel = new Ext.TabPanel(width:200,height:50,items: title:面板1,height:15, title:面板2,height:15, title:面板3,height:15 ); panel.render(hello); );   4 组件和构造函数在ExtJs中，除了一些特殊的组件类以外，所有的组件初始化都可以在构造函数中使用，包含属性名称及值的对象，该对象中的信息业就是指组将的配置属性。例如配置一个面板不能关闭： Ext.onReady(function() var win = new Ext.Window( title:不能关闭窗口, height:200, width:300 ); win.on(beforedestroy,function(obj)/beforedestroy这个函数在起作用 alert(想关闭我,这是不可能的！);obj.show();return false; ); win.show(); ); /由于窗口对象的beforedestory 事件响应中返回值为false，因此执行这段程序你会发现窗口无法关闭 每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的属性配置，另外子类中是时候还会把父类的一些配置属性的含义及用途重新定义。学习及实际ExtJS ,其中关键的是掌握ExtJs中各个组件的配置属性及具体的含义，这些配置属性在下载下来的ExtJS源码文档中都有详细的说明,可以通过这个文档详细了解每一个组件的特性七 Ext 事件处理机制Ext 提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作，控件状态变化，更新控件视图信息，与服务器进行交互等等。事件统一由Ext.EventManager对象管理，与浏览器W3C标准事件对象相对应，Ext封装了一个Ext.EventObject事件对象。支持事件处理的类(或借口)为Ext.util.Observable,凡是继承该类则组件或类都支持对象中添加的事件处理及响应功能。1. 首先看html 标准处理事件function mothod ()alert(“hello sky”);也可以这么干：function a()alert(some thing);window.onload=function()/用js动态的给一个domdocument.getElementById(btnAlert).onclick=a; !这样就不用在页面上添加 onclick 事件了2. ExtJs 中的事件处理 function a() alert(卡卡西); Ext.onReady(function() Ext.get(mine).addListener(click,a); ); Ext.get(“mine”)的到一个页面中的按钮,mine 并联上Ext.Element对象,可以直接调用该对象上的addListener 方法来给对象添加事件，同样实现前面的效果。在调用addListener方法代码中,第一个参数表示名称，第二个参数表示事件处理器或整个响应函数。ExtJS支持事件队列，可以往对象的某一个事件中添加多个事件响应函数，看下面的代码Ext.onReady(function() Ext.get(btnAlert). addListener(click,a);Ext.get(btnAlert). on(click,a);); addListener方法的