Ext简明教程

格式：doc
大小：539.50 KB
文档页数：48

下载文档原格式

/ 48

Ext布局

Ext布局类的介绍与使用在WEB应用的开发中，应用界面的布局设计是一项很重要的内容。

在EXT中，可以通过BorderLayout与NestedLayoutPanel很方便的设计出各种的布局。

本文章的主要内容主要是介绍如何通过BorderLayout、NestedLayoutPanel以及各种面板设计页面布局。

1. BorderLayout类BorderLayout类是布局中的最基本的单元，它已预设了south、east、west、north和center等5个区域。

你可以根据你的需要任意组合这些区域，但是要注意的一点就是，center区域是必须使用的，而且center区域不允许隐藏和折叠。

创建一个新布局的语句如下：new BorderLayout( String/HTMLElement/Element container, Object config )其参数分别是：container：绑定布局的容器。

绑定布局的容易可以是document.body，也可以是其它HTMLElement。

不过如果是其它HTMLElement，该HTMLElement不能是绝对定位的，或者要在该HTMLElement中加入css定义“position:relative”，还需要为该HTMLElement设置大小。

config：布局区域的划分与定义。

主要是对north、south、center、east和west五个区域就行定义。

区域的定义请参考LayoutRegion类的定义参数。

BorderLayout类常用的属性、方法与事件如表1。

属性monitorWindowResize如果设置为发绿色，则不检测窗口大小的改变。

默认值为true。

方法add增加一个内容面板（或子类）到某个区域。

定义：public function add( String target, Ext.ContentPanel panel )参数：target：目标区域的关键字（north、south、east、west 或center）panel：要增加的面板类返回：Ext.ContentPaneladdRegion增加一个不存在的区域。

ExtJS学习笔记

蹒跚学步第一步- 入门想必您已经听说过Ext、浏览了，并且尝试阅读。

不过，面对复杂的API文档，您却不知如何下手？！第二步- 起步通览过，并且找到了所要立刻尝试的功能，面对混杂的网页源代码，如何开始一个简单的测试页面？那么…… 不论您的目标是什么，您都可以依照本文快速的开始使用Ext。

不，不用搭建服务器，您所需要的仅仅是。

如果还没有安装，那么现在就是一个好机会。

第三步–配置工作环境Html 的格式设置<html><head><!-- 下面一行规定了本页面是UTF-8格式编码的。

--><!-- 应一句俗话：“用了UTF-8，走遍天下都不怕”，意思是说UTF是一种囊括了世界多种语言的编码标准，无论客户终端，各平台架构都可放心地使用。

这样，就要统一页面和数据交换的字符本身都是UTF-8的。

--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- Ext自带的样式表，由于脚本中须引用这些样式的定义，所以必须在声明语句的次序上，做到“样式优先”：放在script标签之前。

--><link rel="stylesheet" type="text/css" href="ext/resources/css/"><script type="text/javascript" src="ext/adapter/ext/"></script><script type="text/javascript" src="ext/"></script><title id="page-title">Title</title><!-- 之所以引入以下script标签是为了说明在页面程序中的必要性。

第11章 EXT常用类

第11章EXT常用类EXT为了方便编程，提供了很多扩展了功能的类。

常见的有Ext.Ajax,Ext.util.Format,Date,String等等，每种类都或多或少的增加了函数以扩充功能。

Ext.Ajax：Ext是一个支持Ajax技术的框架，那么Ext.Ajax类里就提供了很多支持Ajax的方法：这是最常使用的request方法，用于做Ajax提交。

url：提交到的服务器地址success：提交成功后的回调函数failure：提交失败的回调函数headers：http协议的头信息，里面可以设置提交字符等。

Params：需要提交服务器的参数这是用Ajax提交一个表单，只要设定表单的id和需要传递的参数就可以了。

Ext.util.Format:1.capitalize( String value ) //String 首字母大写其余小写2.date( Mixed value, [String format] ) :格式化时间Ext.util.Format.date(new Date(), 'F j, Y, g:i a')3.defaultValue( Mixed value, String defaultValue )给变量加默认值4.ellipsis( String value, Number length )截取length -3长度的字符，后面加省略号5.fileSize( Number/String size )把数字转化为文件长度(xxx bytes,xxx KB, xxx MB)6.htmlEncode( String value )7.htmlDecode( String value )8.lowercase( String value ) //转化为小写9.stripTags( Mixed value )10.substr( String value, Number start, Number length )11.trim( String value ) //去掉两端的空格12.undef( Mixed value ) //判断值是否是undefined13.uppercase( String value )Money( Number/String value )除了以上的方法外还有很多方法，不一一列举了Date:常见format格式：函数：1. add ( String interval, Number value )var dt = new Date('10/29/2006').add(Date.DAY, 5); var dt2 = new Date('10/1/2006').add(Date.DAY, -5);2. between ( Date start, Date end )3. clearTime ( Boolean clone ) //清除日期的部分显示4. clone () //复制日期5. format ( String format )6. getDayOfYear ()7. getDaysInMonth ()8. getFirstDateOfMonth ()9. getFirstDayOfMonth ()10. getLastDateOfMonth ()11. getLastDayOfMonth ()12. getWeekOfYear ()13. isLeapYear () //判断是否闰年String:函数：1. escape ( String string ) <static>2. format ( String string, String value1, String value2) <static>3.leftPad( String string, Number size, [String char] ) <static> //把字符串不足固定长度4.trim()5.toggle( String value, String other )// alternate sort directionssort = sort.toggle('ASC', 'DESC');// instead of conditional logic:sort = (sort == 'ASC' ? 'DESC' : 'ASC');Array：1.indexOf( Object o )2.remove( Object o )。

ExtJs使用总结（非常详细）

ExtJs使用总结（非常详细）一、获取元素（Getting Elements）1.Ext.getvar el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存2. Ext.flyvar el = Ext.fly('myElementId')//不需要缓存。

注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。

3.Ext.getDomvar elDom = Ext.getDom('elId'); // 依据id来查dom节点var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom 节点二、CSS元素4.addClassExt.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式5.radioClassExt.fly('elId').radioClass('myCls');//添加一个或多个className 到这个元素，并移除其所有侧边（siblings）节点上的同名样式。

6.removeClassExt.fly('elId').removeClass('myCls'); // 移除元素的样式7.toggleClassExt.fly('elId').toggleClass('myCls'); // 加入样式Ext.fly('elId').toggleClass('myCls'); // 移除样式Ext.fly('elId').toggleClass('myCls'); // 再加入样式8.hasClassif (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式// 是有样式的……}10.replaceClassExt.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式11.getStylevar color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。

Ext甘特图用户手册2.0(中文版)

序言...........................................................................................................................................4 简介...........................................................................................................................................5 ExtJS 甘特图功能特性.....................................................................................................5 甘特图运行效果............................................................................................................... 6 如何安装...................................................................................................................................7 1.下载运行........................................................................................................................7 打开项目................................................................................................. 7 运行示例............................................................................8 开发入门...................................................................................................................................9 甘特图控件的基本原理................................................................................................... 9 DataStore.................................................................................................................12 GanttPanel............................................................................................................... 13 数据结构.........................................................................................................................14 任务的数据结构..................................................................................................... 14 依赖关系的数据结构............................................................................................. 15 加载数据.........................................................................................................................17 保存数据.........................................................................................................................18 实现增删改查接口................................................................................................. 18 后台操作................................................................................................ 18 自定义任务树.................................................................................................................20 自定义列.................................................................................................................20 自定义行.................................................................................................................21 自定义单元格......................................................................................................... 22 自定义编辑器......................................................................................................... 23 编辑器只读事件..................................................................................................... 24 自定义条形图.................................................................................................................25 自定义样式............................................................................................................. 25 条形图前后的标签................................................................................................. 26 自定义提示框......................................................................................................... 26 时间刻度和自定义......................................................................................................... 27 任务时间基线.................................................................................................................28 高级应用.................................................................................................................................31 大数据量和性能优化..................................................................................................... 31 皮肤和主题.....................................................................................................................31 附录一 Extjs 中的 DataStore.................................................................................................34 Record............................................................................................................................. 34 Store................................................................................................................................ 35 DataReader...................................................................................................................... 38 1）ArrayReader...................................................................................................... 38 2）JsonReader........................................................................................................ 39 3）XmlReader........................................................................................................ 40 DataProxy 和自定义 Store............................................................................................. 41

自己整理的Ext笔记非常实用

入门1.1 Ext 简介下载 Ext如果你未曾下载过，那应从官方网站那里下载最新版本的 Ext /downloads 。

因应各种的下载需求，有几种不同的可选项。

通常地，最稳定的版本，是较多人的选择。

下载解包后，那个 example 文件夹便是一个探索 Ext 的好地方！开始！下载示例文件IntroToExt2.zip我们将讲讲怎么使用 Ext，来完成一些 JavaScript 常见的任务。

如果你想自己试试，就应该先下IntroToExt2.zip ，用来构建已下面的 Ext 代码。

Zip 包里有三个文件：ExtStart.html, ExtStart.js 和 ExtStart.css。

解包这三个文件到 Ext 的安装目录中（例如，Ext 是在“C:\code\Ext\v2.0”中，那应该在"v2.0"里面新建目录“tutorial”。

双击 ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。

如果出现了 Javascript 错误，请按照页面上的指引操作。

现在在你常用的 IDE 中或文本编辑器中，打开 ExtStart.js 看看。

Ext.onReady(function() { alert("Congratulations! You have Ext configured correctly!"); });Ext.onReady 可能是你接触的第一个也可能是在每个页面都要使用的方法。

这个方法会在 DOM 加载全部完毕后，保证页面内的所有元素能被 Script 引用（reference）之后调用。

你可删除 alert() 那行，加入一些实际用途的代码试试。

Element：Ext 的核心大多数的 JavaScript 操作都需要先获取页面上的某个元素的引用（reference）,好让你来做些实质性的事情。

Ext学习笔记

1.Ext.OnReady加载DOM结束后执行:Ext.onReady(function () {//获取页面元素，元素ID为“onReady”var input = Ext.get("onReady");Ext.Msg.alert("隐藏控件内容",input.dom.value);});<input type="hidden" value="页面已经加载" id = "onReady"/>2.Ext.define定义类Ext.onReady(function () {//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass', {A: 'a',B: 'b'});//实例化类var textClass =new TextClass();//输出属性名Ext.Msg.alert('类属性', textClass.A +""+ textClass.B);});3. Ext.Define&& extend继承类Ext.onReady(function () {//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass', {A: 'a',B: 'b'});//创建一个类，继承TextClassExt.define("TextClass2", {extend: 'TextClass',//继承TextClassC: 'c'//TextClass2特有的属性})var textClass2 =new TextClass2();Ext.Msg.alert("TextClass2属性",textClass2.A+""+textClass2.B+""+textClass2.C) });4.Ext.Create实例化类Ext.onReady(function () {//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass', {A: 'a',B: 'b'});var textClass = Ext.create("TextClass")Ext.Msg.alert('textClass属性', textClass.A +''+ textClass.B )});5.构造与属性复制：Ext.onReady(function () {//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass', {A: 'a',B: 'b',constructor: function (o) {//复制o中的所有属性到自身Ext.apply(this, o);//复制o中的所有属性到自身,如果类中存在同名属性，就补复制Ext.applyIf(this, o);}});var textClass = Ext.create("TextClass", {A:'A',B:'B',C:'C'})Ext.Msg.alert('textClass属性', textClass.A + '' + textClass.B+''+textClass.C)});6.多继承mixinsExt.onReady(function () {//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass', {A: 'a',B: 'b'});//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass2', {C: 'c',write: function () {alert('A:'+this.A +';B:'+this.B +';C:'+this.C)}})Ext.define('TextClass3', {//继承TextClass、TextClass2mixins: {TextClass: 'TextClass',TextClass2: 'TextClass2'}})var textClass = Ext.create("TextClass3")textClass.write();});7.静态staticsExt.onReady(function () {//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass', {A: 'a',B: 'b',statics: {C:'C'}});//没有实例化TextClass类Ext.Msg.alert('TextClass类的静态属性C的值是：', TextClass.C)});8．Config Get/Set属性Ext.onReady(function () {//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass', {A: 'a',B: 'b',statics: {C: 'C'},config: {configProperty: 'how can i get this property'}});var textClass = Ext.create('TextClass');//通过set方法设置属性的值，注意，包装器会把属性的头字母大写textClass.setConfigProperty("set this property's value");//通过get方法展示属性值Ext.Msg.alert('configProperty属性的值是：', textClass.getConfigProperty()); });9．动态加载JSExt.Loader.setPath({Ext:'/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/src'});Ext.onReady(function () {//加载Ext.window.MessageBox类，位于/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/src/window/Messag eBox.js文件中//注意：一个js文件只有一个类//注意：类名=命名空间名（这里就是EXT）+文件路径名（这里就是window/messagebox）Ext.require("Ext.window.MessageBox")});10.定义model就是定义表结构Ext.onReady(function () {//定义一个类MyInformation,继承自Ext.data.ModelExt.define('MyInformation', {extend: 'Ext.data.Model',//定义类拥有的字段fields: [//字段名：name,类型：auto（默认）{name: 'name' },//字段名：age，类型：int{name: 'age', type: 'int' },//字段名：birthday，类型：date，指定日期格式为：'日/月/年'{name: 'birthday', type: 'date'},//字段名：isStudent，类型：boolean，指定字段默认值为false{name: 'isStudent', type: 'boolean', defaultValue: false }, //字段名：weight，类型：float{name: 'weight', type: 'float' },//字段名：weightKG，类型：float，在在获取到数据的时候，会对数据进行转换，将weight字段的值除以2，赋值给当前字段{name: 'weightKG', type: 'float', convert: function (value, record) {return record.get('weight') *0.5}}]});});11. 创建一条数据：Ext.onReady(function () {//创建一条数据，数据结构为MyInformationvar me = Ext.ModelMgr.create({name: 'animal', //名称age: '30', //年龄birthday: '2012/4/4', //出生日期weight: 150//体重}, 'MyInformation'); //数据结构Ext.Msg.alert("我的信息","我的姓名："+ me.get('name') +"；我的年龄："+ me.get("age") +"；我的生日："+ me.get("birthday") +"；是否是学生："+ me.get("isStudent") +//默认值false"；我的体重(斤)："+ me.get("weight") +"；我的体重（公斤）:"+ me.get("weightKG"));//我的体重（斤）的值乘以0.5});12. 为Model添加自定义方法：Ext.onReady(function () {Ext.onReady(function () {//定义一个类MyInformation,继承自Ext.data.ModelExt.define('MyInformation', {extend: 'Ext.data.Model',//定义类拥有的字段fields: [//字段名：name,类型：auto（默认）{name: 'name' },//字段名：age，类型：int{name: 'age', type: 'int' },//字段名：birthday，类型：date，指定日期格式为：'日/月/年'{name: 'birthday', type: 'date' },//字段名：isStudent，类型：boolean，指定字段默认值为false{name: 'isStudent', type: 'boolean', defaultValue: false }, //字段名：weight，类型：float{name: 'weight', type: 'float' },//字段名：weightKG，类型：float，在在获取到数据的时候，会对数据进行转换，将weight字段的值除以2，赋值给当前字段{name: 'weightKG', type: 'float', convert: function (value, record) {return record.get('weight') *0.5}}],//自定义方法，展示信息getInformation: function () {var info ="我的姓名："+this.get('name') +"；我的年龄："+this.get("age") +"；我的生日："+this.get("birthday") +"；是否是学生："+this.get("isStudent") +"；我的体重(斤)："+this.get("weight") +"；我的体重（公斤）:"+this.get("weightKG");Ext.Msg.alert("我的信息", info);}});//创建一条数据，数据结构为MyInformationvar me = Ext.ModelMgr.create({name: 'animal', //名称age: '30', //年龄birthday: '2012/4/4', //出生日期weight: 150//体重}, 'MyInformation'); //数据结构//执行自定义方法me.getInformation();});});13. Ext对象分为3种：htm控件，EXTJS元素，EXTJS组件选择html控件：Ext.getDom(对象的ID)选择EXT元素：Ext.get(对象的ID)选择EXT组件：Ext.getCmp(对象的ID)//通过Ext.get方法获取第一个文本框对象，返回的是Ext元素Ext.get("text1").set({value: 'Ext.get方法获取的Ext元素'});//通过Ext.getDom方法获取第二个文本框对象，返回的是html控件Ext.getDom("text2").value ="Ext.getDom方法获取的html控件";//通过Ext.get方法获取第三个文本框对象，返回的是Ext元素，通过Ext元素的dom属性，返回html 控件//注：通过EXT元素的dom属性，可以将EXT元素转换为对应的html控件Ext.get("text3").dom.value ="Ext.get方法获取的Ext元素,通过dom属性转化为html" Ext.getCmp("myPanel").setTitle("使用getCmp获取组件")获取标题为name的textfield控件ponentQuery.query('textfield[name=name]')获取标题为“第二个panel”的panel组件下面的所有textfiled组件ponentQuery.query('panel[title=第二个panel] textfield')获取标题为“第二个panel”的panel组件下一层的所有textfiled组件ponentQuery.query('panel[title=第二个panel]>textfield')up：根据CSS语法获取当前组件上层的控件，如果有多个符合条件，只返回第一个down:根据CSS语法获取当前组件下层的控件，如果有多个符合条件，只返回第一个child:根据CSS语法获取当前组件下一层的控件，如果有多个符合条件，只返回第一个14 数据验证：通过在Model的fields属性后面声明validtion属性，实现数据验证数据验证有以下几种：presence：必须赋值length：字段长度format：字段格式，通过matcher属性配置正则表达式inclusion：字段值只能是此属性提供的某一个值exclusion：字段值不能是此属性提供的任意一个值Ext.onReady(function () {//定义一个类MyInformation,继承自Ext.data.ModelExt.define('MyInformation', {extend: 'Ext.data.Model',//定义类拥有的字段fields: [//字段名：name,类型：auto（默认）{name: 'name' },//字段名：age，类型：int{name: 'age', type: 'int' },//字段名：birthday，类型：date，指定日期格式为：'日/月/年'{name: 'birthday', type: 'date' },//字段名：isStudent，类型：boolean，指定字段默认值为false{name: 'isStudent', type: 'boolean', defaultValue: false }, //字段名：weight，类型：float{name: 'weight', type: 'float' },//字段名：weightKG，类型：float，在在获取到数据的时候，会对数据进行转换，将weight字段的值除以2，赋值给当前字段{name: 'weightKG', type: 'float', convert: function (value, record) {return record.get('weight') *0.5}}],//数据验证validations: [//name字段必须赋值{type: 'presence', field: 'name' },//name字段的长度为2-5之间{type: 'length', field: 'name', min: 2, max: 5 },//name字段的值只包含字母{type: 'format', field: 'name', matcher: /^([a-z]+)$/ }, //name字段的值必须包含大写的X和大写的Y{type: 'inclusion', field: 'name', list: ['X', 'Y'] },//weight字段的值不能为0{type: 'exclusion', field: 'weight', list: [0] }]});//创建一条数据，数据结构为MyInformationvar me = Ext.ModelMgr.create({name: 'animal8', //名称age: null, //年龄birthday: '2012/4/4', //出生日期weight: 0//体重}, 'MyInformation'); //数据结构//效验数据var error = me.validate();//显示数据是否符合规范console.log(error.isValid());//如果不符合规范，显示提示信息console.log(error.items);//显示weight字段的提示信息console.log(error.getByField('weight'));});15.加载数据：（load方法）Ext.onReady(function () {Ext.define('MyInformation', {extend: 'Ext.data.Model',//包含3个字段fields: ['id', 'name', 'age', 'address'],//定义代理类proxy: {//从"/Scripts/myInformation.js"交互数据url: "/Scripts/myInformation.js",type: 'rest',reader: {type:'json',root: 'informations'}}});MyInformation.load(1, {success: function (info) {Ext.Msg.alert("信息","我的姓名是："+info.get('name'))}});});{ informations: [{ id:'1', name: 'animal', age: '11', address: '重庆江津'}] } 16.客户端代理：LocalStorageProxySessionStorageProxyMemoryProxy服务器端代理：AjaxProxyScriptTagProxyDirectProxyRestProxyLocalStorageProxy代理使用了html5的localstorage API 来存储和加载数据。

Ext2

入门:T utorial:怎么轻松地进入Ext的世界?通览过API文档(/deploy/dev/docs/)，并且找到了所要立刻尝试的功能，面对混杂的网页源代码，如何开始一个简单的测试页面？那么……不论您的目标是什么，您都可以依照本文快速的开始使用Ext。

不，不用搭建服务器，您所需要的仅仅是Firefox浏览器和Firebug调试插件。

如果还没有安装，那么现在就是一个好机会。

牛刀小试∙打开Ext API文档，您已经上路！∙单击F12 打开Firebug 控制台。

∙如果您的firebug 控制台处于单行模式（以'>>>' 开头），那么请单击右下角的红色上箭头以开启多行编辑模式。

∙输入以下代码，并敲击Ctrl-Enter 来运行:Ext.get(document.body).update('<div id="test"></div>');上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。

刚才那些API文档已经被删除，但Ext 代码依旧生效，并且随时为您效劳。

现在，我们假设您希望简单的添加一个面板元素（Panel），但对Ext.Panel的API冗繁的说明无能为力。

那么试着将这些代码添加到firebug 的控制台中：Ext.get(document.body).update('<div id="test"></div>');new Ext.Panel({renderT o: 'test',width: '200px',title: 'My Title',html: 'My HTML content'});再次敲击Ctrl-Enter 。

嗨！您的面板元素已经诞生。

ext基础核心结构

一．ExtJS基础及核心结构目录1.ExtJS简介 (2)2.ExtJS目录详解 (2)3.开始第一个ExtJS (3)4.Ext版HelloWord (3)4．1 非常有用的Ext开发工具 (5)5.Ext框架基础及核心简介 (5)5.1．Ext类库简介 (5)5.2．Ext的组件 (7)5.3．组件的使用 (8)5.4．组件的配置属性 (11)5.5．ExtJS 组件的事件处理 (12)任务和总结： (14)蓝杰陈九龙QQ：897157611.ExtJS简介ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。

ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS开发的应用程序截图：ExtJS是一个javascript编写的，主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架，因此，可以把 ExtJS 用在.Net、java、php等各种开发语言的开发应用中。

2.ExtJS目录详解要使用ExtJS,首先要得到ExtJS库文件，Ext是一个开源的框架，可以直接从其官方网站下载(网址：/products/extjs/download.php ),进入下载页面,下载Ext JS 2.2.1 SDK到本地，解压后的目录如下图所示：adapter：将提供的第三方的低层库（包括Ext自带的底层库）映射为Ext所支持的底层库；air：Ext2.0后版本新增的用于开发桌面应用的一个类库；build：压缩后的Ext全部源代码（里面分类存放）；docs：Ext API帮助文档；examples：使用Ext技术做出的示例；resources：ExtUI资源文件，如css、images文件；source：无压缩的Ext全部源代码(里面分类存放);ext-all.js：压缩后的Ext全部源代码；ext-all-dubug.js：无压缩的Ext全部源代码(用于调试)；ext-core.js：压缩后的Ext核心组件,包括source/core下的所有类；ext-core-debug.js：无压缩的Ext核心组件，包括source/core下的所有类3.开始第一个ExtJS应用ExtJS需要在页面文件中引入extjs的式样文件及库文件。

ext 技术文档

1、GridPanel 右键菜单实现方法：/***创建右键菜单Time:2009-09-22*@param{}grid*@param{}index*@param{}e*/grid.addListener('rowcontextmenu', rightClickFn);var rightClick = new Ext.menu.Menu( {id : 'rightClickCont',items : [ {id:'rMenu1',text : '查看数据内容',handler:ListRow}, {id:'rMenu2',text : '删除此条数据',handler:delectRow}]});/***创建右键菜单Time:2009-09-22*@param{}client*@param{}rowIndex*@param{}e*/function rightClickFn(client, rowIndex, e) {e.preventDefault();rightClick.showAt(e.getXY());};grid.addListener('rowdblclick', ListRow); //需要此段关键代码【双击事件】/***双击表格_查看数据*/function ListRow(grid, e) {var InformList = DataListID();var num = InformList.length;if(num > 1){Ext.Msg.alert("提示","数据超过"+num+"条,请选择一条数据！");}else{Ext.Msg.alert("提示","数据为第"+num+"条！");}};grid.addListener('rowclick', delectRow); //需要此段关键代码【单击事件】/***右键_删除数据*/function delectRow(grid, e) {var InformList = DataListID();var num = InformList.length;if(num < 0){Ext.Msg.alert("提示","请选择删除数据...");}else{Ext.Msg.alert("提示","共删除"+num+"条数据....");}};2、双击 GridPanel 获取数据并覆盖HTML//双击从表格获取数据function list(){ListForm.form.load({waitMsg : '正在获取消息内容....',//提示信息waitTitle : '提示',//标题url:'page/ZiyouBaowen/informaction.jsp',//请求URL地址获取后台数据method:'post',//请求方式success:function(form,action){//加载成功的处理函数var msgxmlList;var record =grid.getSelectionModel().each(function(rec){msgxmlList = rec.get('msgXml');});if(msgxmlList == null){document.getElementById("xml").innerHTML = "消息内容无数据";}else{document.getElementById("xml").innerHTML = msgxmlList;}},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('错误', '服务器出现错误请稍后再试！');}})};3、创建一个新的窗口// 定义修改密码表单var ListForm = new Ext.FormPanel({region:'center',border:false,frame:true,tabPosition:'bottom',bodyStyle:'padding:0px 0px 0',html:'<table width="650" height="50" border="0" align="center" cellpadding="1" cellspacing="1" bordercolor="#CCCCCC">' +'<tr><td width="130" id=xmlstyle="font-size:12px"><div align="center" ></div></td></tr>' +'</table>'});//创建弹出窗口var win = new Ext.Window({title:'消息_内容',layout:'fit',width:600,closeAction:'hide',height:400,resizable : false,shadow : true,modal :true,closable:true,bodyStyle:'padding:0 0 0 0',animCollapse:true,items:[ListForm]});textfield组件的基本用法<form id="form1" runat="server"><div><div id="Bind_TextField"></div><br /><div id="Bind_Button"></div><script type="text/javascript">//这里是把TextField很重要的属性列出来实际在应用的时候不需要将每个属性都列出也许只需要一个属性就够了。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Ext 2.2 简要教程 1. Ext所需要的必要文件 1. ext-all.js，adapter/ext/ext-base.js就包含了ext的所有功能，所有的js脚本都在这里了。 2. build/locale/ext-lang-zh_CN.js是中文翻译。 3. resources目录下是css样式表和图片。

自己的项目里只需要包含这些东西，就可以使用ext了。使用时，在页面中导入, 请注意js脚本的导入顺序：

2. Ext的表格控件 Ext中的表格功能很强大，包括单选行、多选行、高亮显示选中的行、拖拽改变列宽度、按列排序、自动生成行号、支持checkbox全选、动态选择显示哪些列等等。下面通过例子简单介绍表格的使用方法。

2.1. 表格的骨架我们要先设置这个表格有几列，每列叫什么名字，什么类型，怎么显示，这个表格的骨架也就出来了。 ext里，列的定义，叫做ColumnModel，简称cm，它作为整个表格的列模型，是要首先建立起来的。这里我们建立一个三列的表格，第一列叫编号(id)，第二列叫名称(name)，第三列叫描述(descn)。 var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); 非常简单的定义了三列，每列的header表示这列的名称，dataIndex是跟后面的东西对应的，咱们暂且不提。现在只要知道有了三列就可以了。

2.2. 表格的数据有了表格的骨架，现在我们要向里边添加数据了。为了简便，我们学习examples里的array-grid.js里的方式，把数据直接写到js里。 var data = [ ['1','name1','descn1'], ['2','name2','descn2'], ['3','name3','descn3'], ['4','name4','descn4'], ['5','name5','descn5'] ]; 这个有五条记录的二维数组，显示到grid里就应该是五行，每行三列，正好对应这id,name,descn。，为了让想像变成显示，我们还需要对原始数据做一下转化。

grid不只能支持array，还可以支持json，支持xml，甚至支持咱们自己定义的数据格式，ext为咱们提供了一个桥梁，Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。现在咱们就来看看这个Ext.data.Store是如何转换array的。

var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ]) }); ds.load();

ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。

现在我们用的是Ext.data.MemoryProxy，它是专门用来解析js变量的。你可以看到，我们直接把data作为参数传递进去了。

Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行读取三个数据，第一个叫id，第二个叫 name，第三个descn。这跟cm中的dataIndex是对应的。这样cm就知道哪列应该显示那条数据了。

表格显示时的样子，如图（2-1）。图（2-1）如果要显示的列的顺序与数组定义的顺序不一致，比如第一列数据不是id而是name，第二列数据不是name而是id，这时可以使用mapping来控制数据的读取，如下面代码。 var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id', mapping: 1}, {name: 'name', mapping: 0}, {name: 'descn', mapping: 2} ]) }); 表格此时的样子，如图（2-2）

图（2-2） 2.3. 表格的定义及显示表格的列模型定义好了，原始数据和数据的转换都做好了，剩下的只需要装配在一起，我们的grid就出来了。 var grid = new Ext.grid.GridPanel({ ds: ds, cm: cm, height:150, width:400 });

Ext.onReady(function(){ grid.render('grid-example'); }); Grid通过render方法对表格进行渲染，render方法的参数是渲染表格所在位置的id，在html里应该有一个

此ID也可以在定义grid时，如下方法设置 var grid = new Ext.grid.GridPanel({ el: ‘grid-example’, ds: ds, cm: cm, height:150, width:400 }); 调用render时就可以不需要参数了。 Ext.onReady(function(){ grid.render(); });

2.4. 表格的排序表格的排序其实很简单，需要小小改动一下列模型。 var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id',sortable:true}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); 只要在希望排序的列定义后面加个sortable属性即可对该列进行排序。改动后的效果如图（2-3）

图（2-3） 2.5. 表格的渲染 Ext的表格可以对每一列显示的内容进行自定义的处理，比如设置显示的颜色，显示个图片，按钮等等。比如咱们将上面的例子添加个性别列，将列定义，数据都修改一下 var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id', sortable : true}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]);

var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5'] ];

var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) });

此时显示的效果如图（2-4）

图（2-4）表格只是简单的将数据中的内容原原本本的显示出来，如果我们想根据性别的不同显示出不同的文字和颜色，比如male显示红男，female显示绿女。只要修改一下列定义即可。 var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex',renderer:function(value){ if (value == 'male') { return "红男"; } else {