ExtJs框架开发指南V.docVIP

ExtJs 框架开发指南 1. ExtJs简介 2 2. ExtJs优劣 2 2.1. 优点: 2 2.2. 缺点： 3 3. 开发前提 3 4. 系统构架 4 4.1. 系统数据流程 4 4.2. JS 类继承架构 5 4.3. 基类方法描述： 6 4.4. 系统构架 7 4.5. 开发步骤 8 4.5.1. 定义首页模板 8 4.5.2. 新建业务JS类及后台JAVA类 10 4.5.3. 配置 10 4.5.4. 在首页中加载业务JS类及业务对象类 10 5. 类及其实例 10 5.1. 基本面板例子 10 5.2. 查询列表例子 14 6. ExtJs参考资料 21 ExtJs简介 ExtJS是完全基于JS的RIA框架，它是有CSS + DIV + JS有机结合的一套完整框架，是一套模拟OO的JS框架技术。可以用来开发带有华丽外观的富客户端应用，使得我们的B/S应用更加具有活力及生命力。 ExtJS的组成：ExtJS = ExtJS Core + ExtJS Element + ExtJS Component ExtJS的特点：实现系统的OAOP（One Application One Page），即一个系统只有一个页面，没有跳转，没有刷新，没有iframe ExtJS的技术：系统第一次运行，需要加载ExtJS JS库和CSS，占用带宽1M左右（ExtJS库可以根据组件需求自己定制，所以大小不一定，官方有定制页面），之后完全可以实现其它页面的动态加载（包括回调）和释放。 ExtJS的应用：ExtJS是RIA技术，所以基本上都是应用在企业应用系统中，比如OA、CRM、HR、DCM、ERP等，也可以用来做网站的后台系统。当然，ExtJS并没有规定不能用在网站上。 ExtJS的难点：由于ExtJS完全基于JS和CSS，所以技术核心都集中在JS和CSS上，其中JS比较难地方可以说是Json（数据、对象和语言）和this，如果能看懂月影的《JavaScript王者归来》这一书的一半，学习ExtJS就没这么吃力了。 ExtJs是基于Web的富客户端框架，其完全是基于标准W3C技术构建设的，使用到的都是HTML、CSS、DIV等相关技术。ExtJs最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。 ExtJs优劣 ExtJs相对于Delphi\网页界面设计来说，各有其优缺点,界面强于普通网页，功能又有限于Delphi。 优点: 可继承：像Java一样，可根据业务需求，可编写一套基类供各种业务调用。 异步请求：页面局布刷新即可，不像网页那样刷新要刷新整个页面。 纯基于浏览器，不需要安装插件：与Delphi前台相比，Delphi需安装插件还要加载。 一致的类库： 有统一的基类，有一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。 丰富的文档和示例： Panel,Grid等等开发可以参照例子 华丽的界面： 相比网页、Delphi界面华丽 缺点： 没有合适的开发工具 DW、Myeclipse等开发工具都各有优缺点，都不完美 无可视化界面设计 编码自写，开发效率较低。 不能编译 在实际的开发中，经常会敲错一些代码，比如大小写错误等，不能通过编译得到反馈，只能在运行时排错，导致开发的效率比较低下。 速度与功能：第一次运行需加载全部类库及CSS,速度较慢；与DELPHI功能各有优劣，比如物料选择、过流程 开发前提 开发ExtJs需满足以下技术要求 JavaScript(必须)：ExtJs是Ajax框架，所有代码是JavaScrip编写，必须懂得JS的其本语法及其于类化思维的JavaScript编程 Css：ExtJs之所以界面丰富，完全是由CSS样式决定 除了ExtJs自带样式，有些需要自己编写 Html：网页布局，有时用到 Ajax 、Struts、Jsp Tagelib、Json、Xml： 需了解 在开始搭建Ext 开发环境前，需要安装好下列工具/程序： 1．JDK1.5 2．MyEclipse 2． Ext 基类代码 ExtJs类库及控件属性、方法： 图3-1 ExtJs组件继承结构图 系统构架 系统数据流程 程序在Ajax 页面发出命令，调用BizObject 方法后，生成XML的Request请求， ，在解释后调用后台的Java程序向后台数据库发出相应的指令(如Select ,insert,delete等)来操作数据，在后台数据库完成这些指令后，再由Java程序返回结果给JSP,JSP再解释生成XML的Response结果，TBizObject在捕捉到XML的Response后，解释并返回结果给Ajax 页面并显示。 图