【Jsp精品源码栏目提醒】:文章导读:在新的一年中,各位网友都进入紧张的学习或是工作阶段。
网学会员整理了Jsp精品源码-【精品】ExtJs框架开发指南 V1.0 - 其它资料的相关内容供大家参考,祝大家在新的一年里工作和学习顺利!
ExtJs 框架开发指南1. EXTJS 简介 .................................................................................................................................................. 22. EXTJS 优劣 .................................................................................................................................................. 2 2.1. 优点: ...................................................................................................................................................... 2 2.2. 缺点: ................................................................................................................................................... 33. 开发前提 ....................................................................................................................................................... 34. 系统构架 ....................................................................................................................................................... 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 类及业务对象类 ................................................................................... 105. 类及其实例 ................................................................................................................................................. 10 5.1. 基本面板例子 ..................................................................................................................................... 10 5.2. 查询列表例子 ..................................................................................................................................... 146. EXTJS 参考资料 ........................................................................................................................................ 211. 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 的开发。
2. ExtJs 优劣 ExtJs 相对于 Delphi网页界面设计来说,各有其优缺点界面强于普通网页,功能又有限 于 Delphi。
2.1. 优点: 可继承:像 Java 一样,可根据业务需求,可编写一套基类供各种业务调用。
异步请求:页面局布刷新即可,不像网页那样刷新要刷新整个页面。
纯基于浏览器,不需要安装插件:与 Delphi 前台相比,Delphi 需安装插件还要加载。
一致的类库: 有统一的基类,有一系列非常简单易用的控件及组件,我们只需要使用这些组 件就能实现各种丰富多彩的 UI 的开发。
丰富的文档和示例: PanelGrid 等等开发可以参照例子 华丽的界面: 相比网页、Delphi 界面华丽2.2. 缺点: 没有合适的开发工具 DW、Myeclipse 等开发工具都各有优缺点,都不完美 无可视化界面设计 编码自写,开发效率较低。
不能编译 在实际的开发中,经常会敲错一些代码,比如大小写错误等,不能通过编译得到反 馈,只能在运行时排错,导致开发的效率比较低下。
速度与功能:第一次运行需加载全部类库及 CSS速度较慢;与 DELPHI 功能各有优劣,比如物 料选择、过流程3. 开发前提 开发 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 组件继承结构图4. 系统构架4.1. 系统数据流程 程序在 Ajax 页面发出命令,调用 BizObject 方法后,生成 XML 的 Request 请求, ,在解释后调用后台的 Java 程序向后台数据库发出相应的指令如 Select insertdelete 等来操作数据,在后台数据库完成这些指令后,再由 Java 程序返回结果给 JSPJSP 再解释生成 XML 的 Response 结果,TBizObject 在捕捉到 XML 的 Response 后,解释并返回结果给 Ajax 页面并显示。
ExjJs 页面 CPC.BizObject 类 XMLRequest 请求 XMLResponse 返回结果 业务类对象 Java 业务功能对象
JSP 调用 Java Bean 数据库应用 数据对象 后台数据库 图 4-1 系统数据流程4.2. JS 类继承架构 JS 模板基类都继承 BaseForm.js 而来,在业务中用到的可调用相应的业务其类,如一般常用的是一些单表,多表查询 basesearchform.js左右面板结构模板用 masterdetailform.js;由于javascript 语言非常灵活,不像静态强类型语言(比如 Java)那样有固定的代码设计模式,而往往是不同的人就有不同的编程风格,具体情况可根据需求自行编写代码。
BaseListForm BasePropForm 带新增同级、新增下一 BaseForm BaseBillForm 级功能 Ext.util.Observable BaseSearchForm 继承而来,调用 BaseComboForm cpc.jscpc-ext.js 等 UI 一般表单查询模板 树状模板 库,里面编写了一些 基本方法,如 doRequest… MasterDetailForm BaseStateForm 主从表结构模板,主表 BaseChartForm 在左,从表在右 图 4-1 系统 Js 类继承架构4.3. 基类方法描述: 系统业务类中常用到的方法基本来自于基类模板,而基库模板包括 baseform.js 中用的一些方法常来库 cpc.jscpc-ext.js 等, 这些类主要封装了前台与后台业务逻辑 xml 交互的一些方法。
下面主要列出了常用到基类中的一些方法,这些方法常用于它的扩展基类及业务类: baseform.js:供基类模板类及业务类调用 checkError:取错误信息 onLoadError:取装载错误信息 doRequest:同步或异步请求 与后台交互常用到 doRequestEx: 发送请求方法,与 doRequest 不同之处在于,doRequestEx 是可以指定自己的成功失败函数,而 doRequest 只能使用 processSuccess、processFailure 这两个函数要发送同步请求请使用 doRequest 方法 processFailure:request 包错误时回调信息 processSuccess:request 包成功时回调信息 getDgFirstColIndex:获取 Grid 第一列 ID deleteDgRow:删除网格中的选中行 appendRow:新增一行 isFormValid:验证组件 exportDgToExcel:导出 EXCEL setRecordToObj:表格 grid 行转换为对象 bizObject setObjToRecord: 对象 bizObject 转换为 Record setObjToNewRecord:所对象插入表格 uploadFile:文件上传 basesearchform.js:单表查询模板,以表格显示现查询结果 用到此模板时需传入一个 config 参数,模板界面及查询结果都由这个 config 决定,其参数默认如下: var _config relationName: //关联对象名 pkFieldName: //数据表主健名 bizObjClass: //后台java对象名 searchCond: //查询条件面板 默认无 columns: //表头列 反回列 pageSize: 10 //每页行数 height: 410 master_column_id: master_column_name: renderTo: //返回数据放在哪个元素里面 通常是一个div ID title: //标题 action: search //执行方法 默认search closable: false //是否有关闭按扭 expandWhenLoaded: true selectFirstRow: true //useTreeGrid为true时,是否展开节点 useTreeGrid: false showToolbar: true //是否启用工具栏 toolbars: //工具栏 width: 0 owner: this searchWhenRender: false listeners: condFormSetCfg: /查询条件面板 默认无 dgResultCfg: fpCondCfg: masterdetailform.js: 这是一个主从表左右结构显示模板,表头在左,表体在右。
这个类与 basesearchform.js 类似, config1 为左边显示模板参数,有两个 config 参数, 这个参数与 basesearchform.js 一样,第二个 config2参数为右边显示模板,这个参数中 tabItems 可为多个从表的业务面板,面板类容跟据业务需求自定。
常用到的方法有: rowSelect:单击左边表行行选事件 fSearch:获取左边模板 一般选中左边模板行,右边模板行执行一个查询。
4.4. 系统构架 系统跟一般 web 系统一样,在原有基础上加 ExtJs 类库,如图: Demo :关于对基类的使用些详细例子 Images :业务页面使用的图片 Js :Ext 源文件和 CPC 基类模板 Resources : Ext UI 资源文件目录,如 CSS、图片文件都存放在这里面。
Ext 核心 js ext-all.js:压缩后的 Ext 全部
源码。
ext-all-debug.js:无压缩的 Ext 全部的
源码用于调试。
ext-core.js:压缩后的 Ext 的核心组件,包括 sources/core 下的所有类。
ext-core-debug.js:无压缩 Ext 的核心组件,包括 sources/core 下的所有类。
4.5. 开发步骤4.5.1. 定义首页模板 在整个系统中,一般只有一个
JSP 页面,也就是用户登录进来的首页,首页定义好界面模板框架后,以后要用到业务变化时,在首页框架中增加或修改业务基类模板。
用户在进入首页后,首页会加载所有 ExtJs 类库、CPC UI 库、CSS 样式、业务 JS 类、业务对象类等,这样在业务 JS 类中才可以调用基类,故而这样进入页面会有点慢。
首页程序一般如下:lt page contentTypequottext/html charsetUTF-8quotgtlt—自定义标签 --gtlt taglib uriquot/tags/struts-htmlquot prefixquothtmlquotgtlt taglib uriquot/tags/cpcquot prefixquotcpcquotgtlthtmlgtltheadgtlttitlegtTCL SHOPlt/titlegt lt—所有的css样式,这里面显列举一个 --gt ltlink relquotstylesheetquot typequottext/cssquot hrefquot../resources/css/ext-all.cssquot /gt lt/headgtlt—layout标签,列出用户及系统信息 可参见Java后台此标签代码 --gtltcpc:layout sizequot0quotgtlt/cpc:layoutgtltbodygt ltdiv idquotmainquotgtlt/divgt ltdiv idquotloading-maskquot stylequotbackground-color: whitequotgtlt/divgt ltdiv idquotloadingquotgt ltdiv classquotloading-indicatorquotgtltimg srcquot../images/blue-loading.gifquot widthquot32quot heightquot32quotstylequotmargin-right:8pxfloat:leftvertical-align:topquot/gtTCL SHOPltbrgtltspanidquotloading-msgquotgtlt/spangtlt/divgt lt/divgt ltscript typequottext/javascriptquotgtdocument.getElementByIdloading-msg.innerHTML 初始化核心代码...lt/scriptgt lt-- base lib --gt ltscript typequottext/javascriptquot srcquot../js/lib/ext-base.jsquotgtlt/scriptgt lt-- ext lib --gt ltscript typequottext/javascriptquot srcquot/web2/js/lib/ext-all-debug.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot/web2/js/lib/ext-lang-zh_CN.jsquotgtlt/scriptgt lt-- Ext-lang_zh_CN.js 中文语言包--gt ltscript typequottext/javascriptquotgtExt.BLANK_IMAGE_URL /web2/resources/images/default/s.giflt/scriptgt ltscript typequottext/javascriptquotgtdocument.getElementByIdloading-msg.innerHTML 初始化UI库...lt/scriptgt lt—CPC UI 库 --gt ltscript typequottext/javascriptquot srcquot/web2/js/cpc.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot/web2/js/cpc-ext.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/etoway-ext.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/etoway-util.jsquotgtlt/scriptgt ltscript typequottext/javascriptquotgtdocument.getElementByIdloading-msg.innerHTML 初始化业务逻辑...lt/scriptgt lt-- 业务基类 --gt ltscript typequottext/javascriptquot srcquot../../bid/common/excel_app.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/baseform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/baselistform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/basebillform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/basesearchform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/basepropform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/basecomboform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/basestateform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/masterdetailform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/basechartform.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../js/basewizform.jsquotgtlt/scriptgt lt-- 业务类--gt ltscript typequottext/javascriptquot srcquotjs/index.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquotjs/vendor.jsquotgtlt/scriptgt lt-- 业务类 使用标签--gt ltscript typequottext/javascriptquotgtdocument.getElementByIdloading-msg.innerHTML 初始化务业对象...lt/scriptgt ltcpc:cpcclass classnamequotcompany_infoquot datarelationmetaquottruequot versionquot2quot/gt lt/bodygtlt/htmlgt4.5.2. 新建业务 JS 类及后台 JAVA 类 根据业务需求,明白要建成的是一个什么样的模板,比如说是一个面板,还是一个表格还是其它格式,再调用对应的基类模板,或自定义程序4.5.3. 配置 在系统页面中,新建业务对象 JS 类时,是由 Java 后台标签类来建的,需在 Delphi 前台窗体配置中,配置一下信息。
或在数据库中 cpcobjconf 表中新增一条对应的记录。
4.5.4. 在首页中加载业务 JS 类及业务对象类 代码见首页代码注释处5. 类及其实例5.1. 基本面板例子 一般用于显示表头详细信息 如图当点击左边不同的加盟商时,右边基本信息也发生相应变化,这个例子是显示右边面板的程序代码。
//下面两句为命名空间,如同Java里面的package :package TclShop.baseExt.namespacequotTclShopquotExt.namespacequotTclShop.basequot//下面定义一个方法TclShop.base.Cust_Info 有一个传入参数//这种写法等于JavaScript里面是 function TclShop.base.Cust_Infoowner … TclShop.base.Basic_Cust_Infofunctionowner //定义一个文本输入框 在以下程序中可通过 this.custname 调用 this.custname new Ext.form.TextField //标签名称 fieldLabel: 公司名称 name: custname //如果是true,则允许,否则不允许,默认是true。
//是否允许空值 allowBlank:false //如果allowBlank 设置为true,并且那个textField的值为空,则会显示blankText属性的字符串以给出错误提示。
blankText:公司名称不能为空 //这个控件的宽度 width:295 this.custcode new Ext.form.TextField fieldLabel: 公司简称 blankText:公司简称不能为空 allowBlank:false name: custcode width:170var tel new Ext.form.TextField fieldLabel: .
上一篇:
计算机专业毕业论文主题
下一篇:
法律专业开题报告范文