ext详细介绍、富客户端展现.ppt

在Ext3.x下开发富客户端,富客户端简介:,RIA-RichInterfaceApplication.又被叫做富客户端.是在互联网上提升用户感受的开发框架.目前比较流行的RIA有jQueryUI.-EXTJS-DOJO-Java-Struts2FlexFlash-swf.Edojs(国产)-SivlerL,ExtJs简介:,ExtJS是一个很优秀的Ajax框架，可以用来开发带有华丽外观的RIA(富客户端)的AJAX应用，使得我们的B/S应用更加具有活力及生命力。由于它是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，还是数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。下面是一些使用ExtJS开发的应用程序截图：,ExtJS应用截图,ExtJS应用截图,ExtJS目标:,要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址,Ext的下载主页-可以看出这支持:手机桌面:,部署Extjs的开发包:,由于Extjs全部都是js代码.它的很多示例都是基于html写成的,所以,在下载完成后,打开它的index.html即可以查看效果.但一些高级功能,需要后台代码的支持.而extjs的默认后台代码为php.为了让我们的程序运行,我们必须要将extjs的开发包,部署的到一个可运行php的服务器上才可以运行.非常庆幸的是,rasin做为一款优秀的J2EE服务器,它同时支持jsp和php代码.且在MyExcilpe中也集成了对rasin的支持.Rasin的最新版本为4.0,它同时也运行aspx(.net).但对于我们的开发.使用3.10即可.Rasin是绿色的,解压后即可以使用.,北京传智播客教育,使用Rasin部署Extjs3.x:,部署rasin专业开发版.查看doc文档.-以下是部署完成后运行的主页面.,Extjs的目录结构:,adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。src：压缩后的ext全部源码(里面分类存放)docs：API帮助文档。exmaples：提供使用ExtJs技术做出的小实例。resources：ExtUI资源文件目录，如CSS、图片文件都存放在这里面。Ext-all.js：压缩后的Ext全部源码。ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。,搭建开发环境:,应用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的开发环境:,建立一个新的web项目-(必须使用UTF-8编码).注意事项(本人是在纯Eclipse上开发,与MyEclipse无异)由于目前js的语法扩展很多,而EclipseMyEclipse对很多新的js语法无法识别,所以会在验证js文件上打上红叉.选择:windowsprefercensValidation,去掉对js的验证即可.Copy所需要的Extjs文件.搭建好的extjs项目如下:,Extjs项目搭建成功后的图示:,目录:,显示按扭:Ext.Button面板:Ext.Panel窗口:Ext.Window表单:Ext.form.FormPanel树:Ext.tree.TreePanel整体窗口:Ext.ViewPort一个页面上只能使用一个，且是自动渲染的，且必须要拥有至少一个孩子即items。-不可见。表:Ext.grid.GridPanel数据Ext.data.RecordExt.data.StoreExt.data.JsonStore,Quick-Start:,使用ExtJS框架的页面一般包括下面几句：在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数。Ext.onReady(function()alert(ExtJS库已加!););,Ext.Msg.alert开发提示框:,使用自定义对话框:,其他更多提示框的细节请见ext的英文官方(中文上面少很多东东)doc文档.,Ext的常用方法:,get(id)获取HTML元素.将将它转成Ext.Element类型,只有获取此种类型,才可以进行Ext的某此设置.getCmp(id)获取EXT的组件-返回Ext.Component类型.getDoc(id)返回HTMLdocument类型的对像getDom()返回Ext.HTMLElement类型.getBody()-返回已经被EXT转化的HTMLbody,记住前两个即可.,北京传智播客教育,Ext.Element的动画效果：,Ext.Button:,使用Button创建一个菜单按扭：,使用Ext.SplitButton:,Ext.DatePicker:,Ext.Panel,面板与布局格式：,给面板添加功能按扭：,Accordion布局手风琴：,BorderLayout:-东西南北中：,列布局：,表单布局FormLayout:,北京传智播客教育,工具栏：,选项卡布局：,Ext.Window,Ext.ViewPort：,TheViewportrendersitselftothedocumentbody,andautomaticallysizesitselftothesizeofthebrowserviewportandmanageswindowresizing.TheremayonlybeoneViewportcreatedinapage.InnerlayoutsareavailablebyvirtueofthefactthatallPanelsaddedtotheViewport,eitherthroughitsitems,orthroughtheitems,ortheaddmethodofanyofitschildPanelsmaythemselveshavealayout.,Ext.form.TextField等表单元素：,以下是必须使用Store数据的组件：,ComboBoxTreePanelGridPanel,ComboBox-下拉框-从本地加载数据:,Acomboboxcontrolwithsupportforautocomplete,remote-loading,pagingandmanyotherfeatures.,Combox-通过JSON加载数据：,通过加载远程文件加载数据的Combox:,北京传智播客教育,TreePanel-树状结构:-静态简单树:,北京传智播客教育,通过静态