Extjs入门培训教程.doc

Ext培训1. 前言Ext是一款优秀的Ajax框架，目前已经出道了3.x版本。可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。这次培训的目的：对Ext有一个大体的了解，并且掌握进一步学习的方法。2. JS基础要学好Ext必须对JS有一定的了解。2.1 闭包所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码：function a() var i=0; function b()alert(+i); return b;var c = a();c();这段代码有两个特点：1）函数b嵌套在函数a内部；2）函数a返回函数b。这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。闭包的应用场景：1) 保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。2) 在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。以上两点是闭包最基本的应用场景，很多经典案例都源于此。Ext中也存在许多这样的情况。2.2 对象简单的声明一个对象var Person= name: 刘德华,年龄:50,address: 中国;var personObj=new Object(); personObj.firstname=John; personObj.lastname=Doe; personObj.age=50; personObj.eyecolor=blue; 构造对象的方式有以下几种:1 构造方式function User() this.username = zhangsan;/this.不能丢 this.say = function()/this.不能丢 alert(username: + this.username );/this.不能丢 /下面注释的这种写法不对 / function say() / alert(username: + this.username ); / var user = new User(); user.username = lisi; user.say();/username:lisi var user1 = new User(); user1.say();/username:zhangsan,不受user对象的影响 /多个实例对象不共享类的属性值，如下: function User() this.username = new Array();/this.不能丢 this.say = function()/this.不能丢 alert(username: + this.username );/this.不能丢 var user = new User(); user.username.push(zhangsan); user.say();/username:zhangsan var user1 = new User(); user1.say();/user1的username为空，不为zhangsan,因为user1的属性值不受user影响 优点:多个实例对象不共享类的属性值，缺点:每个实例对象都会产生出一个函数say。 不共享函数就会让每个对象都有自己的函数副本,这样就消耗了较多的资源，所以就出现下面这种工厂方式的对象创建方式。2 以工厂方式创建 function showColor() alert(this.color); function createCar(sColor,iDoors,iMpg) var oTempCar = new Object; oTempCar.color = sColor; oTempCar.doors = iDoors; oTempCar.mpg = iMpg; oTempCar.showColor = showColor; return oTempCar; var oCar1 = createCar(red,4,23); var oCar2 = createCar(blue,3,25); oCar1.showColor(); / red oCar2.showColor(); /blue var personObj=new Object(); 3 原型方式function User() Utotype.username = zhangsan; Utotype.say = function() alert(username: + this.username ); var user = new User(); user.username = lisi; user.say();/username:lisi var user1 = new User(); user1.say();/username:zhangsan /类的属性值如果是引用类型的(非Number和String类型)，则多个实例对象共享,如下 function User() Utotype.username = new Array(); Utotype.say = function() alert(username: + this.username ); var user = new User(); user.username.push(zhangsan) ; user.say();/username:zhangsan var user1 = new User(); user1.say();/username:zhangsan,因为user1属性也会受到user的影响，user1和user指向同一引/用，即共享同一属性 缺点:类的属性值如果是引用类型的(非Number和String类型)，则多个实例对象共享4 构造/原型结合方式(最常用)用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性 。function Car(sColor,iDoors,iMpg) this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array(Mike,Sue); Ctotype.showColor = function() alert(this.color); var oCar1 = new Car(red,4,23); var oCar2 = new Car(blue,3,25); oCar1.drivers.push(Matt); alert(oCar1.drivers); /Mike,Sue,Matt alert(oCar2.drivers); /Mike,Sue 优点：既能拥有对象属性也能拥有类属性，此时和JAVA已经很相似了。但是有些人还是不满足，因为这个原型方法或者属性的声明是脱了类的定义体的。所以才会出现第最后一种声明方式。5 动态的原型方式function User() this.username = zhangsan; if(typeof User.flag = undefined) alert(execute.); Utotype.say = function() alert(username: + this.username ); User.flag = true; var user1 = new User();/execute. var user2 = new User();/不会打印出execute.，则说明方法只创建了一次，即方法只会产生一个 user1.say();/username 优点:类的方法只会产生一个，不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的。 总结: 构造方式:缺点:类里的方法，每个实例对象都会产生一个，导致产生大量方法;优点:所有实例对象都单独拥有一份类里的属性，即属性不共享。 原型方法:缺点:所有实例对象都共同拥有一份类里的属性，即属性共享。优点:类的方法只会产生一个，不会产生大量方法。 构造和原型结合方式:优点:类的方法只会产生一个，不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。 动态的原型方式:优点:类的方法只会产生一个，不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的。 2.3 原型(prototype)什么叫做原型原型的意义2.4函数的作用域所谓函数的作用域，就是函数在运行的时候的this所指定的对象，通常一个函数在运行的时候都有个函数作用域被传递进函数。如:var Person = name:刘德华,say: function() alert(); / 这里必须使用thisPerson.say() / 刘德华可以看到say函数里面this就是它的作用域。在执行Person.say() 的时候其实已经将Person对象本身作为函数的作用域（this）传入。所以要弹出Person对象的name属性，就必须使用this来获取。如果一个方法被绑定到一个对象，那么这个函数的作用域（this）就是其绑定的对象，但是没有绑定到具体的对象，那么改函数的作用域就是window对象。但是在实际的应用中，有时候需要去改变函数的作用域或者动态的设置函数的作用域，这就需要在JAVASCRIPT中大名顶顶的apply/call方法来完成了。在ExtJS中很多地方都是需要使用函数作用域这个概念的，最典型的地方就是添加事件监听函数的时候指定scope。这个scope就是事件监听函数的作用域。2.5 apply/call方法的使用call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数。对于apply和call两者在作用上是相同的，但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。如：var person = name: 老师,say : function(w) alert( + 说: + w);/ 弹出name属性var sutdent = name : 学生/正常情况下person.say(同学们好)/ applyperson .say.apply(student ,老上午师好!) / 学生说: 老师上午好!/callperson .say.call(student , 老师下午好!);/ 学生说: 老师下午好!2.6继承作为面向对象的开发过程中，继承是一个很重要的应用，特别是在ExtJS中。各个组件之间是存在继承关系的。要深入的了解Ext的继承机制，那么就必须先了解JAVASCRIT中继承机制。下面分别介绍。先定义一个父类Personfunction Person(name, sex) = name; this.sex = sex; this.move = function() alert(move); ; 1 对象冒充可以冒充得到正确结果，其实javascript是这样的，将整个方法替换掉pe，当我们调用this.(name,sex);时相当于在Man里面执行上面的那一段代码，而此时的this已经代表的是Man对象，使Man也具有了name，sex等属性与及move方法。function Man(name, sex, address, phone) this.pe = Person; this.pe(name, sex); / 得到父类的构造属性与方法 delete this.pe; this.address = address; this.phone = phone; var man = new Man(LL,女,广东,110000);alert();alert(man.move();2 call/apply 方法实现继承call方法里面会将this及Person中的参数传递到调用的方法中，此时的this代表的是Man2对象，当调用到Person的构造方法的时候，调用的时候已经是M了，这种方法也可以实现继承。function Man2(name, sex, address, phone) Person.call(this, name, sex); / Person.apply(this, new Array(name, sex); this.address = address; this.phone = phone;以上两种方式可以实现多继承，但是如果父类的prototype声明的属性或者方法就无法继承。也正是如此才会有下面的两种继承方式。3 原型prototype链如下function Person2() P = ;Ptotype.sex = ;Ptotype.move = function() alert();function Man4() Mtotype = new Person2(); / 实现继承由于一个对象只能有一个prototype对象，所以不能实现多继承。4 混合方式通过混合方式，可以达到最大的重用。function Person3(name, sex) = name; this.sex = sex;Ptotype.login = function() alert(prototype constructual);function Man5(name, sex, birthday) Person3.call(this, name, sex);/ call方式继承 this.birthday = birthday;Mtotype = new Person3();/ 原型链方式继承Mtotype.say = function() alert(say hello!);混合方式是通过将apply/call方式与原型链方式结合而来的，达到了最大的重用。2.7 Ext继承的实现（查看源码）2.8其它的DHTML知识3. Ext的基础3.1 DOM/Element/Component3.2 Observable/Component/BoxComponent/Container/Panel3.3 内存对象与渲染后的对象3.4常用的工具类Ext.Element类，DomHelper类，DomQuery类，Ext类。Element类：Element类是实现对Dom对象的封装，提供了大量直接操作dom对象的方法。是构成Ext高级组件的基础。Element类的常用方法Element.show()Element.hide()Element.setVisibilityMode()Element.setVisible()Element.setOpacity();Element.update()Element.load();Element.parent();Element.createChild();Element.appendChild();Element.remove()Element.insertBefore/insertAfter();Element.insertFirst();Element.insertSibling();Element.setHeight/setWidth();Element.setSize();Element.setBounds();Element.move();Element.center();Element.highling();Element.frame();DomHelper类：DomHelper工具类其实是为了提供一个统一跨浏览器的操纵dom对象而设计的。而Element类的相关操作dom的方法其实就是通过DomHelper类来实现的。DomQuery类：DomQuery类是用来获取页面的元素的，它可以单独使用的，就是说可以脱离Ext而单独使用。它可以通过三种方式选择元素：元素选择符属性选择符CSS值元素选择符 Ext类：Ext提供了一个核心的Ext类，该类是单例类，不能直接创建，该类提供了辅助应用Ext的各种组件及控件调用Ext类的几个方法: Ext.onReady() 自动运行入口 Ext.get() 得到一个 Element 对象，参数可以是 id 或 DOM 节点或已存在的 Element 对象。 Ext.getCmp() 获取一个Component对象 Ext.getDom() 获取一个Dom对象Ext.query() 查询元素 Espace()定义命名空间Ext.each()循环迭代处理数组中的每一个对象，当函数返回“false”时停止， Ext.apply() 给目标对象添加属性，会覆盖原有属性 Ext.applyIf() 给目标对象添加属性，不会覆盖原有的属性 Ext.decode() JSON字符串转换成对象/ Ext.util.JSON.decode 的缩写 Ext.encode() 对象转换成字符串 / Ext.util.JSON.encode 的缩写Ext.reg() 注册一个xtype类型3.5 常用的组件Ext.ViewPortExt.Panel一个可以带标题，工具条，按钮等元素的面板，是使用最多的控件之一，Ext.form.FormPanel，Ext.grid.GridPanel等都是它的子类。FormPanel对应了一个form表单，可以并且提供了数据校验，错误信息提示，等功能。Window一个弹出窗口，可以设置否为模态的。GridPanel功能强大的表格控件，使用它，你可以很方便的使用以下功能：表格排序；列的显示、隐藏、拖动等；表格的编辑和保存；表格数据的删除等TextField对应了一个文本框ComboBox和下拉列表框对应的组件，通过指定其 store 属性，可以自动的异步加载数据。RadioGroup对应了一组radio按钮CheckboxGroup对应了一组checkbox 复选框3.6 Ext组件的渲染过程分析（查看文档）3.7布局管理器在WEB应用的开发中，应用界面的布局设计是一项很重要的内容。在EXT中，可以通过布局管理器很方便的设计出各种的布局。布局管理器的主要功能是代替原来HTML的Frame，而是用frame来布局有以下缺点：1) 嵌套层数有限制，一般只会嵌套一到两层2) 各个页面间的数据传递非常繁琐，而且较多的iframe会占用一定系统资源3) 缺乏复杂的大小调节，事件交互功能Ext的布局管理器使得开发一个单页面(OPOA)程序成为可能，常见的布局管理器有：BorderLayout，ColumnLayout，AnchorLayout，TableLayout，FitLayout，AccordionLayout，CardLayout，FormLayout等。【解说】组件与容器以及布局管理器的关系3.8 延迟渲染（xtype）3.9 GridPanel的说明GridView、ColumModel、SelectionMode。4. Ext的事件机制-自定义事件与浏览器事件任何一种界面编程的语言都会有自己的编程机制，Ext也不会例外。Ext的事件机制相当的灵活，如果使用的好的话能让ExtJS的面向对象编程更加方便简单,可以大大的降低ExtJS中对象的耦合度。下面就简单的介绍一下Ext的事件处理机制，当然这个要从Ext事件处理的抽象类Ext.util.Observable开始。4.1 事件抽象类Ext.util.ObservableExt.util.Observable提供了一组通用的接口来处理事件的定义，发布，订阅等操作，主要的方法有：1) 定义（添加）事件：addEvents( Object object ) : void2) 订阅事件：addListener( String eventName, Function handler, Object scope, Object options ) : void给对象的事件添加处理函数（相当于订阅），第一个参数是事件名称，第二个参数是事件处理函数，第三个参数是作用域（即函数中this指向的对象），最后一个参数是事件的一些信息，如参数等。on( String eventName, Function handler, Object scope, Object options ) : void给对象的事件添加处理函数（相当于订阅），第一个参数是事件名称，第二个参数是事件处理函数，第三个参数是作用域（即函数中this指向的对象），最后一个参数是事件的一些信息，如参数等。3) 触发事件：fireEvent( String eventName, Object. args ) : Boolean触发一个事件，第一个参数是事件名称，第二个参数是传递给事件处理函数的参数。4.2 简单举例我们以一个公司聘请和解雇职员为例：首先让建立公司对象Company，让其继承自Ext.util.Observable，这样它就有了定义事件、发布事件、触发事件的功能，然后编写fireEmployee解雇职员方法和retainEmployee聘请职员方法：Company = function(companyName) this. companyName = companyName;/ 公司名称 this.addEvents( fired : true,/ 定义解雇事件 retain : true/ 定义聘请事件);this.fireEmployee = function(employee) / 定义解雇职员方法/ 使用addListener订阅fire事件，指定作用域为 employee对象。this.addListener(fire, employee. beFired, employee);/ 触发fire事件，将公司名称传递到处理函数this.fireEvent(fire, this. companyName );this.retainEmployee = function(employee) / 定义聘请职员方法/ 使用on方法订阅fire事件，指定作用域为 employee对象。/ this.on(retain, employee. beRetained, employee);this.on(fire,)/ 触发retain事件，将公司名称传递到处理函数this.fireEvent(retain, this. companyName );Ext.extend(Company, Ext.util.Observable);/ 让Company继承事件处理对象建立Employee（职员）类，它有两个方法，一个是被聘请的方法，一个是被解雇的方法：Employee = function(name) = name;/ 职员名称this.beFired = function(companyName) / 传入公司名称/ alert：XX is fried by XX/ 注意这里的 this 是Company. fireEvent方法中scope参数指定的对/ 象，companyName也是Company. fireEvent传递进来的。alert( + is fired by + companyName);this.beRetained = function(companyName) / 传入公司名称/ alert：XX is retained by XX/ 注意这里的 this 是Company. fireEvent方法中scope参数指定的对/ 象，companyName也是Company. fireEvent传递进来的。alert( + is retained by + companyName);聘请职员、解雇职员：var company = new Company(“华为技术有限公司”);var employee = new Employee(“王小强”);company. retainEmployee(employee);company. fireEmployee(employee);结果会弹出： 王小强 is retained by 华为技术有限公司王小强 is fired by 华为技术有限公司4.3 Ext对浏览器事件的封装Ext对原始的浏览器事件做了进一步的封装，将原来的浏览器事件对象做成常规化处理，所谓的常规化处理就是将原始的事件封装成跨浏览器的统一的一个对下你给，这样开发者就不需要关心跨浏览器而导致的错误了。4.4 Ext事件的相关实现类Ext的自定义事件是有Ext.util.Observable类与Ext.util.Event类来实现的。而Ext的浏览器事件封装是通过 Ext.EventManager，Ext.EventObject与Ext.lib.Event来实现的。5. Ext的数据存储机制ExtJS的数据存储机制是一个比较强大的客户端数据管理机制，这里简要的介绍它的3个部分组成：5.1 数据存储器：Ext.data.StoreExt.data.Stroe主要是负责保存管理数据的。Store可以看作是Ext.data.Record的集合，一个Record对象对应了Store种的一条记录，Store可以添加、删除、修改Record。eg: var _store = new Ext.data.Store();var _r = new Ext.data.Record(name,age)_r.set(name,小明); _r.set(age,28);_store.add(_r);/ 给Store添加一条记录_store.remove(_r)/ 在Store中删除一条记录通常将一个Store与一个Ext.grid.Grid或者Ext.form.ComboBox邦定的时候，删除一条记录，那么对应的gird和combobox的都会相应的改变。主要有三种常用的Store，它们是：Ext.data.JsonStore 专门针对JSON格式数据的storeExt.data.XmlStore专门针对Xml个数据的StoreExt.data.SimpleStore 专门针对数组格式数据的Store5.2 数据解析器：Ext.data.DataReader负责从数据源、数据代理哪里读取和解析数据，并且将这些数据转换成相应的Record然后插入到Store中，这样我们就可以不需要去关心数据是怎么被解析的了。常见的解析器都是Ext.data.DataReader的子类，有以下几个：Ext.data.JsonReader 专门负责读取JSON格式的数据；Ext.data.XmlReader 专门负责读取XML格式的数据；Ext.data.ArrayReader 专门负责读取数组格式的数据；构建Reader的方式如下（以JsonReader为例）：New Ext.data.JsonReader( / 指定读取数据的位置 root:data,/ 给Record造型，指定要创建什么样的Recordnew Ext.data.Record.create(deviceID,deviceName) )5.3 数据代理：Ext.data.DataProxy代理各种数据源，这样我们就不需要去管我们的数据是哪里来的，去理解数据请求的细节，直接使用一个合适的DataReader就可以正确的读取数据了。数据代理也有几种，但是常用的就只有两种，它们是：Ext.data.HttpProxy 主要负责代理Http请求返回的数据，你可以通过param属性对它指定参数。Ext.data.MemoryProxy 主要负责代理本地内存中的数据源通过store读取数据的例子/* * SimpleStore的例子 用户管理模块的角色类型 */Elog.system.usermgr.store.roleTypeStore = new Ext.data.SimpleStore( fields : code, roleType, data : 0,管理员,1,审计员,2,操作员);/* * Store的例子 用户管理模块的设备信息 store */Elog.system.usermgr.store.deviceInfoStore = new Ext.data.Store( autoLoad:true, url:userRoleMgrAction!queryDevice.action, reader:new Ext.data.JsonReader(root:data,new Ext.data.Record.create(deviceID,deviceName);/* * Store的例子 用户管理模块的设备信息 store */Elog.system.usermgr.store.deviceInfoStore.load(params : / 指定传递到Server的参数 deviceType:101, deviceID:20,callback : function(r,op,success) / 回调处理)6. Ext 中的元素查找7 Ext 表单的数据校验机制ExtJS 表单对数据校验提供了良好的支持。7.1 BasicForm.isValid方法首先从BasicForm说起，在提交的时候通常会使用BasicForm.isValid ()来判断表单数据是否合法，源码如下：BasicForm.isValid : function() var valid = true; this.items.each(function(f) if(!f.validate() valid = false; ); return valid;从代码可以看出BasicForm.isValid ()会让BasicForm.items集合中的所有item都执行validate()方法来自行验证，只有所有的Itme的validate校验都通过的时候才返回true。那么这个BasicForm.items到底是包含了什么东西呢？其实BasicForm.items包含的只是表单元素：input元素，textArea等。表单中的label，Div等元素是不会在这里面的，通常来说从Ext.form.Field类继承而来的都会在BasicForm.items中。这里只得注意的是FormPanel.items和BasicForm.tems是两个不同的集合。7.2 Field.validate方法接下来看看BasicForm.items集合item的validate方法，从上面的分析可以知道这个item通常就是Field的子类，所以我们就Field开始。Field.validate : function()/ 数据校验被委托到Field.validateValue中处理if(this.disabled | this.validateValue( / Field. processValue 对原始的值进行加工处理cessValue(this.getRawValue() / 清除无效时的状态 this.clearInvalid(); return true; return false; FcessValue : function(value) return value; / private/ Subclasses should provide the validation implementation by overriding this Field.validateValue : function(value) return true;从上面的代码我们可以看出Field只是提供了一个校验的模板，具体的校验规则需要具体的子类去实现validateValue方法和processValue方法。7.3 TextField.validateValue方法下面我们就来深入的探讨一下TextField的数据校验函数validateValue，以TextField为切入点来探讨一下数据校验的实现，看代码：TextField.validateValue : function(value)/ 空白校验 if(value.length 1 | value = this.emptyText) if(this.allowBlank) this.clearInvalid(); return true; else/ 标记无效状态 this.markInvalid(this.blankText); return false; / 最小长度校验 if(value.length this.maxLength) this.markInvalid(String.format(this.maxLengthText, this.maxLength); return false; / vtype验证 if(this.vtype) var vt = Ext.form.VTypes;/ vtthis.vtype 得到的是vtype定义的校验函数 if(!vtthis.vtype(value, this)/ 标记无效状态，并且从vtype中获取错误信息。 this.markInvalid(this.vtypeText | vtthis.vtype +Text); return false; / 自定义校验器验证 if(typeof this.validator = function) var msg = this.validator(value); if(msg != true) this.markInvalid(msg); return false; / 正则表达式校验 if(this.regex & !this.regex.test(value) this.markInvalid(this.regexText); return false; return true;从上面的代码分析可以看出TextField提供了多种数据校验方式：空白校验；文本长度校验；Vtype校验；自定义校验器校验；正则表达式校验。TextField的输入实时校验实时数据校验就是指在TextField按键，或者获取焦点，失去焦点事件发生时马上就进行数据校验。既然实时校验时和事件密切相关的，那么我们就从TextField.initEvents方法开始。/ private TextField.initEvents : function()Ext.form.TextField.superclass.initEv