资源描述:
《ext详细介绍、富客户端展现》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、在Ext3.x下开发富客户端富客户端简介:RIA-RichInterfaceApplication.又被叫做富客户端.是在互联网上提升用户感受的开发框架.目前比较流行的RIA有jQueryUI.---EXTJS--DOJO-Java-Struts2Flex–Flash-swf.Edojs(国产)-SivlerLight-.netExtJs简介:ExtJS是一个很优秀的Ajax框架,可以用来开发带有华丽外观的RIA(富客户端)的AJAX应用,使得我们的B/S应用更加具有活力及生命力。由于它是一个用javascript编写,与后台
2、技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,还是数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。下面是一些使用ExtJS开发的应用程序截图:ExtJS应用截图ExtJS应用截图ExtJS目标:要使用ExtJS,那么首先要得到ExtJS库文件,该框架是一个开源的,可以直接从官方网站下
3、载,网址http://www.sencha.com/,进入下载页面.为什么ExtJs的页面不叫www.extjs.com而叫sencha(煎茶)呢?目前最新的版本是Extjs4.0.但由于其太新,目前国内公司没有使用它的示例.所以,仍然以3.x版本为主.Ext4.0在很多方面对3.x进行了彻底的更新.这也致使很多公司不能快速上手的原因.Ext的目标是搭建移动桌面应用的富客户端开发.其实它已经取得了某些成功.Ext的下载主页-可以看出这支持:手机桌面:部署Extjs的开发包:由于Extjs全部都是js代码.它的很多示例都是基
4、于html写成的,所以,在下载完成后,打开它的index.html即可以查看效果.但一些高级功能,需要后台代码的支持.而extjs的默认后台代码为php.为了让我们的程序运行,我们必须要将extjs的开发包,部署的到一个可运行php的服务器上才可以运行.非常庆幸的是,rasin做为一款优秀的J2EE服务器,它同时支持jsp和php代码.且在MyExcilpe中也集成了对rasin的支持.Rasin的最新版本为4.0,它同时也运行aspx(.net).但对于我们的开发.使用3.10即可.Rasin是绿色的,解压后即可以使用.北京
5、传智播客教育www.itcast.cn使用Rasin部署Extjs3.x:部署rasin专业开发版.查看doc文档.-以下是部署完成后运行的主页面.Extjs的目录结构:adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。src: 压缩后的ext全部源码(里面分类存放)docs:API帮助文档。exmaples:提供使用ExtJs技术做出的小实例。resources:ExtUI资源文件目录,如CSS、图片文件都存放在这里面。Ext-all.js:压缩后的Ext全部源码。ext-all
6、-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
7、/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。开始搭建Extjs的开发环境:建立一个新的web项目-(必须使用UTF-8编码).注意事项(本人是在纯Eclipse上开发,与MyEclipse无异)由于目前js的语法扩展很多,而EclipseMyEclipse对很多新的js语法无法识别,所以会在验证js文件上打上红叉.选择:windows>prefercens>Validation,去掉对js的验证即可.Copy所需要的Extjs文件.搭
8、建好的extjs项目如下:Extjs项目搭建成功后的图示:目录:显示按扭:Ext.Button面板:Ext.Panel窗口:Ext.Window表单:Ext.form.FormPanel树:Ext.tree.TreePanel整体窗口:Ext.ViewPort-一个页面上只能