搜索
ExtJS简介ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS开发的应用程序截图：(wlr的blog应用)(ExtJS的表格控件)(不同主题的ExtJS弹出框效果)ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。获得ExtJS要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址，进入下载页面可以看到大致如图xxx所示的内容，可以选择选择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）开源的协议。Ext-all.js：压缩后的Ext全部源码。ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。应用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框架的页面中一般包括下面几句：linkrel=stylesheettype=text/csshref=extjs/resources/css/ext-all.css/scripttype=text/javascriptsrc=extjs/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=extjs/ext-all.js/script在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：scriptfunctionfn(){alert(‘ExtJS库已加’);}Ext.onReady(fn);/scriptfn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：scriptfunctionfn(){alert(‘ExtJS库已加载!’);}Ext.onReady(function(){alert(‘ExtJS库已加载!’);});/scriptExtJS版的Hello下面我们写一个最简单的ExtJS应用，在hello.html文件中输入下面的代码：htmlxmlns==Content-Typecontent=text/html;charset=utf-8/titleExtJS/titlelinkrel=stylesheettype=text/csshref=extjs/resources/css/ext-all.css/scripttype=text/javascriptsrc=extjs/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=extjs/ext-all.js/scriptscriptExt.onReady(function(){Ext.MessageBox.alert(hello,Hello,easyjfopensource);});/script/headbody/body/html图1-11hello.html页面效果进一步，我们可以在页面上显示一个窗口，代码如下：scriptExt.onReady(function(){varwin=newExt.Window({title:hello,width:300,height:200,html:'h1Hello,easyjfopensource/h1'});win.show();});/script在浏览hello.html，即可得在屏幕上显示一个窗口，如图xxx所示。Ext类库简介ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。ExtJS的类库由以下几部分组成：底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录中，包括DomHelper.js、Element.js等文件，如图xx所示。控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets子目录中，包含如图xx所示。实用工具Utils：Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能，如图所示：ExtJS的组件Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件，Ext组件是由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。ExtJS中的组件体系由下图所示：组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：xtypeClass-------------------------------boxExt.BoxComponent具有边框属性的组件buttonExt.Button按钮colorpaletteExt.ColorPalette调色板componentExt.Component组件containerExt.Container容器cycleExt.CycleButtondataviewExt.DataView数据显示视图datepickerExt.DatePicker日期选择面板editorExt.Editor编辑器editorgridExt.grid.EditorGridPanel可编辑的表格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触发录入项组件的使用组件可以直接通过new关键子来创建，比如控件一个窗口，使用newExt.Window()，创建一个表格则使用newExt.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：scriptvarobj={title:hello,width:300,height:200,html:'h1Hello,easyjfopensource/h1'};varpanel=newExt.Panel(obj);panel.render(hello);/scriptdivid=hello /div运行上面的代码可以实现如下图所示的结果：可以省掉变量obj，直接写成如下的形式：varpanel=newExt.Panel({title:hello,width:300,height:200,html:'h1Hello,easyjfopensource/h1'});panel.render(hello);render方法后面的参数表示页面上的div元素id，也可以直