【Jsp精品源码栏目提醒】:网学会员鉴于大家对Jsp精品源码十分关注,论文会员在此为大家搜集整理了“ExtJS基础教材 - 产品手册”一文,供大家参考学习
目录 Extjs前言 JavaScript基础了解 Extjs版本变迁 Extjs资源与准备 Ext组件介绍 Ext.data类 GridPanel组件类 功能效果演示ExtJS前言 概要:ExtJS是一种用于在客户端创建丰富多彩的web应用程序界面,可以用来开发RIA的 AJAX应用,是完全基于纯Html/CSSJS技术的Ajax框架,提供了丰富的跨浏览器UI组件,灵 活采用JSON/XML数据源开发,使得服务端表示层(VIEW)的负荷真正减轻,从而达到客户端 的MVC应用 Extjs :基于html/cssjavascript的Ajax框架,主要用于创建前端用户界面。
Extjs是一个跨浏览器的应 用 RIARich Internet Applications:富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户 端。
MVC:Model View Controller 即把一个应用的输入、处理、输出流程按照Model、View、Controller的 方式进行分离,这样一个应用被分成三个层——模型层、视图层、控制层 Ext的适配器:Ext成型于YahooUI的Javascript库的扩展。
在当时,Ext须依赖YUI的底层代码来处理跨 浏览器的问题。
现在ExtJS已经是独立、免依赖的库(standalone ),可将Extjs替换为另外所选择 javascript库,如prototype、jQuery、或者是这些之中的最佳选择-Ext自带的底层库。
负责将这些库 (包括Ext自带的底层库)映射为Ext底层库的这部分代码,我们称之为适配器(Adapters)。
优点:统一的效果、丰富的控件、强大的功能、能任意改变的皮肤、完美的浏览器兼容、原生态 的ajax、多种数据格式的支持、插件…… 学习之前,先来了解一下JavaScript的基础知识吧。
JavaScript基础 最最基本的数据格式—JSON JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,已经是 javascript标准的一部分.对于WEB2.0来说Json是目前最灵活的解决方案。
JavaScript是一种面向对象的弱类型语言。
Json与map一样,也是一种键值对(Key- Value)的数据格式.key-string型数据value可以是任何的数据类型 。
可以利用JSON来构造想要的bean或对象 不是基于类 ,而是基于原型。
它的类可以看作是json与函数的一个深度调用。
单例类 var Demo function 多例类 使用构造函数和new关键字 原型. prototype JavaScript 的所有function类型的对象都有一个prototype属性。
这个prototype属性本身 又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方 法。
prototype是对象的“原型”,由该函数构造出来的对象都会具有这个“原型”的特性。
事 实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接 访问和调用的。
也可以说,prototype提供了一群同类对象共享属性和方法的机制ExtJS版本变迁 Ext1.0发布于2007年2月 Ext此时正是从YUI独立出来,不在仅仅支持YUI,而是提供了ext-base,prototype, jquery和YUI 4种低层实现。
这个版本提供了基本的表格、树形、表单、窗口和布局组件。
它采用多协议发布方式,可以在LGPL和企业协议下使用。
Ext2.0发布于2007年12月 这是一次大版本升级,重写了核心组件部分,简化了组件的布局和配置。
Ext2.1发布于2008年4月 这次升级包括对REST的支持,并提供了一些扩展组件。
不过最大的改变是对开源协议的修 改,2.1版本之后,所有未付费的用户只能在GPL协议下使用Ext,也就是不能用于商业项 目。
Ext2.2发布于2008年8月 这个版本提供了对Firefox 3.x的支持,并提供了多种高级表单输入控件,如RadioGroup和 CheckboxGroup,MultiSelect和ItemSelector,以及FileUploadField。
ExtJS版本变迁 Ext2.2.1发布于2009年2月 这个版本提供了对Chrome浏览器的支持,解决了一些内存泄露的问题,并为 Container提供了removeAll函数,同时提供了AIR下的扩展组件。
Ext3.0发布于2009年6月 Ext3.x 的变化主要是提供了重构并提炼了Ext Core,同时重写了Button和 Toolbar ,使3.x中的按钮可以实现多种显示方式(如自动填充,图文混排),并 对工具条提供了溢出控制。
Ext3.1发布于2009年12月 最主要是对性能的提升,解决了单页面长时间使用的内存泄露问题。
Ext4.0发布于2011 年4 月 这是ExtJS 发布以来最重要的一次更新,这个版本核心的改造是检视框架的架构 和重塑其基础;还有对应用框架、类系统、SDK和数据包等几个方面的改进。
ExtJS资源 下载资源 adapter文件夹:该文件夹包含了extjs和其实框架如jquery、yui、prototype的桥接器,用 于Extjs和这些框架的友好整合。
build文件夹:包含了所有js文件的紧凑压缩版,方便网络传输,提高下载速度。
docs文件夹:Extjs的帮助文档,遗憾的是要先布署在服务器上才能访问。
网上有人制作了 无需布署的版本。
examples文件夹:自带的示例全部在该文件夹中。
resources文件夹:包含了Extjs所需要的样式表文件和图片资源。
source文件夹:源代码文件夹,没有经过压缩的版本。
ext-base.js:基础类库。
ext-core.js:核心类库。
ext-all.js:类库完整版。
ext-all-debug.js:带格式的未压缩的类库完整版,带调试功能。
ext-core-debug.js:带格式的未压缩的核心类库。
CHANGES.html:开发及升级日志。
license.txt:协议准备工作 Ext部署环境 SpketIDE For MyEclipse 提高效率,减少错误常见问题 ExtJs乱码 建议使用utf-8 字体渲染 默认11px不同浏览器对11px渲染不同,firefox中渲染成10px,IE下则渲染成12px,建 议12px 图片不显示 Ext.BLANK_IMAGE_URL“../extjs/resources/images/default/s.gif” BLANK_IMAGE_URL是一个常量,路径根据环境发生变化 ……Ext组件Ext组件4.0组件分类一 基本组件组件分类二 工具栏组件组件分类三 表单及元素组件Ext.data——DataProxy Ext.data.DataProxy是获取数据的一种代理,数据可以是内存中的,也可以是同一域 或不同域的服务器上的。
实际应用通常使用子类:Ext.data.HttpProxy Ext.data.MemoryProxy Ext.data.ScriptTagProxy; HttpProxy:使用http协议通过ajax从远程服务器获取数据的代理,需指定URL。
后 台需返回Ext所需的json格式的数据。
Var proxy new Ext.data.HttpProxyurl : ‘xxx.
jsp’ MemoryProxy:获取来自内存的数据(只能从JavaScript中获得),可以是数组, JSON或xml。
Var data new Ext.data.MemoryProxy“js的数据” ScriptTagProxy :功能和HttpProxy一样,但支持跨域获取数据。
Var proxy new Ext.data.ScriptTagProxyurl : “xxx.
jsp” String cb request.getParamter“callback” //后台处理Ext.data——DataReader Ext.data.DataReader通常不单独使用,大多和DataProxy一起,作用是从 DataProxy当中读取数据,依次生成record数据 每个行都是一个Ext.data.Record对象,行的列信息都是由它来定义的。
它保存的是 一个JSON对象的数据,通常包含name(逻辑名称) type(数据类型) mapping (数据源的索引映射)。
使用示例如下 Var record Ext.data.Record.create name : ‘uname’ type : ‘string’ mapping : 0 name : ‘usex’ type : ‘string’ mapping : 1 如果字段顺序和列顺序一致,可以不用额外配mapping. Record创建好后,必须和DataReader关联。
具体关联取决于DataProxy中的数据类 型 Ext.data.ArrayReader 不支持分页 Ext.data.JsonReader 支持分页,mapping : ‘X’,X可以是数字,字段或者对象 Ext.data.XmlReaderExt.data——Store Ext.data.Store是ext用来进行数据交换和数据交互的标准中间件,不论是 表格或ComboBox,都是通过它实现数据读取、类型转换、排序分页和搜索 等等。
Store至少有proxy和reader两个组件的支持;用于整合DataProxy和 DataReader;用法如下: Var store new Ext.data.Store Proxy : new Ext.data.MemoryProxydata Reader : new Ext.data.ArrayReader Proxy用于读取数据 Reader用于将数据转换成record实例。
Ext.grid.GridPanel 分为表头,数据行,分页栏 表头由Ext.grid.ColumnModel定义,是Ext.util.Observable的子类。
其中包含若干列, 列的信息保存在JSON中 数据行就是Ext.data类获取的数据 分页栏也是一个组件类——PagingToolbar GridPanel的辅助类 Ext.grid.ColumnModel,列模型,定义表头 Ext.grid.RowSelectionModel,行选择模型,定义行的选择操作 Ext.grid.GridView,视图,负责表格面板效果的渲染 Ext.data.Store,数据源 Ext.grid.RowNumberer,序号生成器,总1开始 Ext.grid.CheckboxSelectionModel,带复选框的行选择器,便于多选示例代码(GridPanel效果) //创建列的标题 var cm new Ext.grid.ColumnModelnew Ext.grid.CheckboxSelectionModel header : 编号 dataIndex : cid header : 城市 dataIndex : cname //创建数组形式的JSON数据 var citys 1 北京 2 上海 3 广州 4 重庆 var proxy new Ext.data.MemoryProxycitys //数据放到内存里面 //创建数据列record var record Ext.data.Record.create name : cid type : int name : cname type : string //Array解析 var reader new Ext.data.ArrayReader record //store从内存中读取数据 var store new Ext.data.Store 效果图 proxy : proxy reader : reader autoLoad : true //GridPanel显示 var panel new Ext.grid.GridPanel store : store cm : cm renderTo : jin height : 500 示例代码(ComboBox分页) var dept diddname var store new Ext.data.JsonStore url:ComboBoxServlet fields : dept totalProperty : totalProperty root : root var combobox new Ext.form.ComboBox store : store mode : remote js pageSize : 5 emptyText : 请选择部门 displayField : dname valueField : did renderTo : Ext.getBody triggerAction : all servlet listWidth : 300 在页面引入js文件 效果图项目功能效果 MemoryProxy HttpProxy
上一篇:
黑客术语大全
下一篇:
法律专业开题报告范文