ext4.0学习文档

概念：（1）ExtJS是一个面向开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。（以前是基于YAHOO-UI,现在已经完全独立了）（2）之所以说是框架，因为它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去写庞大js实现；它是一种纯面向对象的JS框架。扩展性相当的好，可以自己写扩展，自己定义命名空间，web应用可能感觉太大，不过您可以根据需要按需动态的加载您想要的类库就可以了，避免了网络传输流量问题。（3）它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧，更重要的是它核心的组件基本覆盖了我们构建富客户端的常用的组件以及各种功能，在统计方面做的也非常出色。（4）在3.0的时候提供了类似与dwr的方式调用后台代码，交互更加简单;4.0版本又提出了MVC模式的开发，支持组件化、模块插拔化设计以及提供本地数据源的支持。第一章EXTJS的基本概念1.组件component:能够以图形化形式呈现界面的类，其中还可以分为容器组件与元件组件。容器组件:能够包含其它容器或者元件组件的类，其是进行单元化组件开发的基础元件组件：能图形化形式表现一个片面功能的组件，其不仅在实现了原有传统WEB程序的现有组件，而且还扩展了许多实用的组件，如刻度器、日历、树形列表等。2.类提供功能的非图形可形的类，它们为图形类提供了有力的支持按其功能可分为：数据支持类(Data)、拖放支持类（DD）、布局支持类（layout）、本地状态存储支持类（state）、实用工具类（Util）。密封类：不能被扩展的类原型类：扩展了javascript标准类库中的类3.方法作为类的功能体现，能够产生改变对象本身产生变化的直接因素方法按访问形式可分为公有方法与私有方法。但由于javascript从原理上根本不支持这种结构，因此在EXTJS中，私有与公有方法完全凭借着用户自觉，没有像JAVA那样的强制性。4.事件由类定义的，并且可以在类对象自身状态发生改变的触发。只有被定阅的事件才会有效如果不需要此事件，应该进行退定，增强程序的执行效率。5.配置选项用以初始化一个EXTJS类对象的手段注意，配置选项并不一定就是属性，总算是属性，也有可能出现属性返回的类型与你当初指定的配置选项类型不一致的情况。6.属性能够在程序运行期间，能够被访问，用以了解当前类对象的状态。在实际的编程中，EXTJS的属性设置，比较差劲，需要通过了解其源代码，才能了解各种实用属性的用处。7.命名空间能够将编写好的EXTJS类进行有效组织的手段。这个也是EXTJS能够称之为优秀AJAX框架的特征之一。第二章Ext4.0新特性以及常用数据处理功能1.extjs4.0对原生javaScript功能进行了扩展（API中的Utilities模块中的NativeExtensions）Utilities：常用的一些工具处理类NativeExtensionsExt.ArrayExt.NumberExt.ObjectExt.StringExt.JSONExt.DateExt.Function具体扩展了那些，请参照具体的API说明，扩展的原理eg：Js代码1.varPerson={name:'yfc',age:26};2.//alert(Person['name']);3.//extjs4.0提供getKey的函数4.//alert(Ext.Object.getKey(Person,'yfc'));5.Object.prototype.getValue=function(key,defValue){6.if(this[key]){7.returnthis[key];8.}else{9.returndefValue;10.}11.}12.alert(Person.getValue(email,[e-mail]));13.//由于给Object的原型加上了一个getValue的函数，这样所有的对象（都继承Object）默认都会拥有这个函数。2.事件机制与新特性（1）给对象加事件：Js代码1.Ext.get(元素ID).on(click,function(){2.//函数处理部分3.});（2）新特性：create与define（extend、requires、config、mixins、alias以及statics）。create：在ExtJs4.0中你可以通过new方式也可以用create的方式得到一个对象的实例，在4.0版本中建议用create的方式来创建实例，这样ExtJS会对创建的实例进行统一管理。Js代码1.//create第一个参数为类路径，第二个参数为该类的一些初始化参数值（以对象的形式传递）2.varwin=Ext.create('Ext.window.Window',{3.width:400,4.height:300,5.title:'uspcat'6.});7.8.win.show();alias：别名的作用，可以把一个对象的内部函数暴漏处理啊，给其他对象直接调用。eg：Js代码1.varo={2.say:function(){3.alert(11111);4.}5.}6.7.//通过o.say()调用函数8.9.varfn=Ext.Function.alias(o,'say');10.fn();//通过别名的方式我们就可以直接调用fn()等于o.say()。define：是用来定义一个类的，eg：Js代码1.//create第一个参数是类的全路径，第二个参数则是类的内容2.Ext.define('Bmsys.ml.Window',{3.extend:'Ext.window.Window',4.title:'Window',5.closeAction:'hide',6.width:380,7.height:300,8.resizable:false,9.modal:true,10.//定义一些自己的扩展参数11.myTitile:'myWindow',12.setTitle:function(){13.this.title=this.myTitle;14.}15.16.//初始化的方法(类似java中的构造方法)17.initComponent:function(){18.this.setTitle();19.this.callParent(arguments);20.}21.});22.23.varwin=Ext.create('Bmsys.ml.Window',{24.titile:'youWindow';25.}26.);27.28.win.show();//此时创建出来窗体的标题是myWindow，说明创建时，传入的初始化参数比构造器先执行。注意：属性只能在define时定义，不能通过win.myHeight=function(){...}添加属性。requires:JS的异步加载（按需加载），解决了网络js文件大而造成页面打开慢得问题，只有当成需要用到这个类时Ext才去到后台加载包含这个类的js文件；在这里就要，要求我们在写js类的时候要尽量的模块化，一个类就是一个js文件，而且类名与js文件名一致，命名空间定义规范。Js代码1.//这时候要启用自动加载2.Ext.Loader.setConfig({3.enabled:true,4.paths:{5.myApp:'js/Bmsys/ml'//js文件相对路径，需要与命名空间保持一致6.}7.});8.9.//这时候只要保证Window.js放在js/Bmsys/ml这个目录下命名空间为Bmsys.ml.Window就可以了。10.//这时就不需要在JSP文件中引入Window.js,等到下面的程序被执行时，才会根据命名空间去到后台加载Window.js。11.//原理就是通过命名空间与文件路径，拼接好后通过写入script标签的方式加载。12.varwin=Ext.create('Bmsys.ml.Window',{13.titile:'youWindow',14.requires:['Bmsys.ml.Window']15.}16.).show();config:这个属性就是把你定义类的属性自动的加上get、set方法，省去自己去写的麻烦事。Js代码1.Ext.define('Bmsys.ml.Window',{2.extend:'Ext.window.Window',3.title:'Window',4.width:380,5.height:300,6.//定义一些自己的扩展参数7.myTitile:'myWindow',8.config:{9.myHeight:80010.}11.});12.13.varwin=Ext.create('Bmsys.ml.Window',{});14.15.alert(win.getMyTitle());//报错，没有定义getMyTitle函数16.alert(win.getMyHeight());//正常弹出值为80017.18.//放在config里面定义的属性，Ext会自动给这个属性加上get、set方法。mixins：类的混合（多继承实现），因为我们在用define定义类的时候，extend只能继承一个类。为了拥有其它类定义好的方法及功能，我们可以通过类的混合来实现。Js代码1.Ext.define(say,{2.cansay:function(){3.alert(hello);4.}5.})6.Ext.define(sing,{7.sing:function(){8.alert(singhello123);9.}10.})11.12.//通过类的混合，就可以轻松拥有上面两个类里面的函数。13.Ext.define('user',{14.mixins:{15.say:'say',16.sing:'sing'17.}18.});19.20.varu=Ext.create(user,{});21.u.cansay();//say类里面的方法22.u.sing();//sing类里面的方法static：类似java中静态，我们可以定义一些静态的属性以及方法，通过类名'.'的方式来访问。Js代码1.Ext.define('Computer',{2.statics:{3.factory:function(brand){4.//'this'instaticmethodsrefertotheclassitself5.returnnewthis(brand);6.}7.},8.constructor:function(){...}9.});10.//直接通过类名'.'的方式访问静态方法11.vardellComputer=Computer.factory('Dell');3.数据模型model（MVC中的M层）数据模型对真实世界中对事物在系统中的抽象，extjs4.0中的mode相当于DB中的table或JAVA中的Class。（1）model的几种创建以及实例的方法。Js代码1.//我们利用Ext.define来创建我们的模型类2.//DBtableperson(name,age,email)3.Ext.define(person,{4.extend:Ext.data.Model,5.fields:[6.{name:'name',type:'auto'},7.{name:'age',type:'int'},8.{name:'email',type:'auto'}9.]10.});11.//定义的时候，不需要每次写extend:Ext.data.Model12.Ext.regModel(user,{13.fields:[14.{name:'name',type:'auto'},15.{name:'age',type:'int'},16.{name:'email',