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

在Ext3.x下开发富客户端,富客户端简介:,RIA-Rich Interface Application.又被叫做富客户端. 是在互联网上提升用户感受的开发框架. 目前比较流行的RIA有 jQueryUI.- EXTJS - DOJO - Java-Struts2 Flex Flash - swf. Edojs(国产) - SivlerLight -.net,ExtJs简介:,ExtJS是一个很优秀的Ajax框架，可以用来开发带有华丽外观的RIA(富客户端)的AJAX应用，使得我们的B/S应用更加具有活力及生命力。由于它是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，还是数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。 下面是一些使用ExtJS开发的应用程序截图：,ExtJS应用截图,ExtJS应用截图,ExtJS目标:,要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址/，进入下载页面. 为什么ExtJs的页面不叫而叫sencha(煎茶)呢? 目前最新的版本是Extjs4.0.但由于其太新,目前国内公司没有使用它的示例.所以,仍然以3.x版本为主. Ext4.0在很多方面对3.x进行了彻底的更新.这也致使很多公司不能快速上手的原因. Ext的目标是搭建移动桌面应用的富客户端开发.其实它已经取得了某些成功.,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：Ext UI资源文件目录，如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.Record Ext.data.Store Ext.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) 返回HTML document类型的对像 getDom() 返回Ext.HTMLElement类型. getBody()-返回已经被EXT转化的HTML body, 记住前两个即可.,北京传智播客教育 ,Ext.Element的动画效果：,Ext.Button:,使用Button创建一个菜单按扭：,使用Ext.SplitButton:,Ext.DatePicker:,Ext.Panel,面板与布局格式：,给面板添加功能按扭：,Accordion布局手风琴：,BorderLayout:-东西南北中：,列布局：,表单布局FormLayout:,北京传智播客教育 ,工具栏：,选项卡布局：,Ext.Window,Ext.ViewPort：,The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all Panels added to the Viewport, either through its items, or through the items, or the add method of any of its child Panels may themselves have a layout.,Ext.form.TextField等表单元素：,以下是必须使用Store数据的组件：,ComboBox TreePanel GridPanel,ComboBox-下拉框-从本地加载数据:,A combobox control with support for autocomplete, remote-loading, paging and many other features.,Combox-通过JSON加载数据：,通过加载远程文件加载数据的Combox:,北京传智播客教育 ,TreePanel-树状结构:-静态简单树:,北京传智播客教育 ,通过静态J