ext入门总结范文

ext入门总结范文 ExtJs学习Author:石恺元datetime:xx-11-24一Ext简介一Ext简介ExtJS是一种优秀的Ajax框架，可以用来开发带有华丽外观的RIAlto(富客户端)的Ajax应用，使得我们的B/S应用更加具有活力。 由于他是一种用JavaScript编写，与后台技术无关的前端Ajax框架因此，可以把ExtJS用在.,java,php等多种开发语言中。 Ext使用做出来的东西很像桌面程序ExtJS开始基于YUI技术，由开发人员jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式,数据解析上的异常处理Ext都很优秀。 要使用ExtJs，那么首先要得到ExtJx文库文件,该框架是一个开源的，可以直接从官方网站上下载网址是.sencha./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.四开始燃烧的远征1.hello world New Document /这里调用了浏览器的alert框（不太好看）2.用ext的方messageBox做一个漂亮的alert框关于MessageBox我们可以查看帮助下面做一个好看的ext alert框 New Document /利用Ext的MessageBox弹出一个alert框这个就比较好看了下面我们在来做一个可以改变大小的窗体 win.show();)/显示一个好看的窗体并且可以改变他的大小3.用两个一个遮住另一个用两个一个遮住另一个 4.s五Extde组成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六Ext的组件体系1组件的构成组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件?基本组件xtype Class-box Ext.BoxComponent具有边框属性的组件button Ext.Button按钮colorpalette Ext.ColorPalette调色板ponent Ext.Component组件container Ext.Container容器cycle Ext.CycleButton dataviewExt.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录入框bo Ext.form.ComboBox bo选择项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触发录入项2创建组件组件可以直接通过new关键子来创建，比如创建一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。 一般都会在构造函数中通过传递构造参数（Json格式的）来创建组件。 组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件3创建组件的例子a)第一个一个panel窗口 例如配置一个面板不能关闭 /由于窗口对象的beforedestory事件响应中返回值为false，因此执行这段程序你会发现窗口无法关闭每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的属性配置，另外子类中是时候还会把父类的一些配置属性的含义及用途重新定义。 学习及实际ExtJS,其中关键的是掌握ExtJs中各个组件的配置属性及具体的含义，这些配置属性在下载下来的ExtJS源码文档中都有详细的说明,可以通过这个文档详细了解每一个组件的特性七Ext事件处理机制七Ext事件处理机制Ext提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作，控件状态变化，更新控件视图信息，与服务器进行交互等等。 事件统一由Ext.EventManager对象管理，与浏览器W3C标准事件对象相对应，Ext封装了一个Ext.EventObject事件对象。 支持事件处理的类(或借口)为Ext.util.Observable,凡是继承该类则组件或类都支持对象中添加的事件处理及响应功能。 1.首先看html标准处理事件 3.组件和事件监听还可以直接在组件的配置属性中直接声明，Ext.onReady(function()var win=new Ext.Window(title:不能关闭的窗口,height:200,width:300,listeners:beforedestroy:function(obj)alert(想关闭我，这是不可能的!);obj.show();return false;);win.sh