Extjs4 API文档阅读

Extjs4API文档阅读(一)——类系统(ClassSystem)2011-07-02来源：互联网作者：佚名(共0条评论)ExtJS4使用新的类机制进行了大量的重构。为了支撑新的架构,ext4几乎重写了每一个类,因此最好先好好的理解一下新的架构,再开始编码。ExtJS4使用新的类机制进行了大量的重构。为了支撑新的架构,ext4几乎重写了每一个类,因此最好先好好的理解一下新的架构,再开始编码。本文适合想在extjs4中扩展现有类或者创建新类的开发者。其实，不管是想扩展还是使用，都建议您仔细阅读一下（如果E文好的，建议您还是阅读英文原文。链接地址是：）。文章共分4个部分，建议每一部分都仔细研究下，对之后的开发工作，会有意想不到的好处。第一部分：概述。说明了强大的类机制的必要性第二部分：编码规范。讨论类、方法、属性、变量和文件命名第三部分：DIY。详细的编码示例第四部分：错误处理和调试。提供一些有用的调试和异常处理技巧一、概述ExtJS4拥有超过300个的类.迄今为止,我们的社区拥有超过20万来自世界各地,使用不同后台语言的开发者.要在这种规模的框架上提供具有以下特点的架构,需要面临巨大的挑战：1、简单易学。2，快速开发、调试简单、部署容易。3，良好的结构、可扩展性和可维护性。二、编码和规范*在所有类、命名空间（namespace）和文件名中使用一致的命名约定,有助于保持代码的良好结构和可读性。1)Classes类名只能包含字母和数字。允许包含数字，但是大部分情况下不建议使用，除非这些数字是专业术语的一部分。不要使用下划线，连字符等非数字字母符号。例如：1.MyCompany.useful_util.Debug_Toolbarisdiscouraged2.MyCompany.util.Base64isacceptable3.类名应该包含在使用点号分隔的命名空间中。至少，要有一个顶级命名空间。例如：1.MyCompany.data.CoolProxyMyCompany.Application顶级命名空间和实际的类名应使用驼峰命名（CamelCased），其他则为小写。例如：1.MyCompany.form.action.AutoLoad不是Sencha开发的类（即不是Ext自带的）不要使用Ext做为顶级命名空间。缩写也要遵守以上的驼峰式命名约定。例如：1.Ext.data.JsonProxyinsteadofExt.data.JSONProxy2.MyCompany.util.HtmlParserinsteadofMyCompary.parser.HTMLParser3.MyCompany.server.HttpinsteadofMyCompany.server.HTTP2)代码文件类名对应类所在的文件（包括文件名）。因此，每个文件应该只包含一个类（类名和文件名一样）。例如：Ext.util.Observable存放在path/to/src/Ext/util/Observable.jsExt.form.action.Submit存放在path/to/src/Ext/form/action/Submit.jsMyCompany.chart.axis.Numeric存放在path/to/src/MyCompany/chart/axis/Numeric.jspath/to/src是你的应用所在目录。所有类都应该在这个通用根目录下，并且使用适当的命名空间以利于开发、维护和部署。3）方法和变量•和类命名一样，方法和变量也只能包含字母和数字。数字同样是允许但不建议，除非属于专业术语。不要使用下划线，连字符等任何非字母数字符号。•方法和变量名一样使用驼峰式命名，缩写也一样。•举例•合适的方法名：encodeUsingMd5()getHtml()代替getHTML()getJsonResponse()代替getJSONResponse()parseXmlContent()代替parseXMLContent()•合适的变量名：varisGoodNamevarbase64EncodervarxmlReadervarhttpServer4）属性类属性名称遵循以上的变量和方法命名约定.除非是静态的常量.类的静态属性常量应该全部大写。例如：oExt.MessageBox.YES=YesoExt.MessageBox.NO=NooMyCompany.alien.Math.PI=4.13三、DIY,,,1).声明1.1)旧的方式如果你曾经使用过旧版本的extjs,那么你肯定熟悉使用Ext.extend来创建一个类:1:varMyWindow=Ext.extend(Object,{...});这个方法很容易从现有的类中继承创建新的类.相比直接继承,我们没有好用的API用于类创建的其他方面,诸如:配置、静态方法、混入（Mixins）。呆会我们再来详细的重新审视这些方面。现在，让我们来看看另一个例子：1:My.cool.Window=Ext.extend(Ext.Window,{...});在这个例子中，我们创建我们的新类，继承Ext.Window，放在命名空间中。我们有两个问题要解决：1，在我们访问My.cool的Window属性之前,My.cool必须是一个已有的对象.2,Ext.Window必须在引用之前加载.第一个问题通常使用Ext.namespace(别名Ext.ns)来解决.该方法递归创建(如果该对象不存在)这些对象依赖.比较繁琐枯燥的部分是你必须在Ext.extend之前执行Ext.ns来创建它们.1:Ext.ns('My.cool');2:My.cool.Window=Ext.extend(Ext.Window,{...});第二个问题不好解决,因为Ext.Window可能直接或间接的依赖于许多其他的类,依赖的类可能还依赖其它类...出于这个原因,在ext4之前,我们通常引入整个ext-all.js,即使是我们只需要其中的一小部分.1.2)新的方式在Extjs4中,你只需要使用一个方法就可以解决这些问题:Ext.define.以下是它的基本语法:1:Ext.define(className,members,onClassCreated);className:类名members:代表类成员的对象字面量(键值对,json)onClassCreated:可选的回调函数,在所有依赖都加载完毕,并且类本身建立后触发.由于类创建的新的异步特性,这个回调函数在很多情况下都很有用.这些在第四节中将进一步讨论例如:1:Ext.define('My.sample.Person',{2:name:'Unknown',3:4:constructor:function(name){5:if(name){6:this.name=name;7:}8:9:returnthis;10:},11:12:eat:function(foodType){13:alert(this.name+iseating:+foodType);14:15:returnthis;16:}17:});18:19:varaaron=Ext.create('My.sample.Person','Aaron');20:aaron.eat(Salad);//alert(Aaroniseating:Salad);注意我们使用Ext.create()方法创建了My.sample.Person类的一个新实例.我们也可以使用新的关键字(newMy.sample.Person())来创建.然而,建议养成始终用Ext.create来创建类示例的习惯,因为它允许你利用动态加载的优势.更多关于动态加载信息,请看入门指南:入门指南2).配置在ExtJS4,我们引入了一个专门的配置属性,用于提供在类创建前的预处理功能.特性包括:配置完全封装其他类成员getter和setter.如果类没有定义这些方法,在创建类时将自动生成配置的属性的getter和setter方法。同样的,每个配置的属性自动生成一个apply方法.自动生成的setter方法内部在设置值之前调用apply方法.如果你要在设置值之前自定义自己的逻辑,那就重载apply方法.如果apply没有返回值,则setter不会设置值.看下面applyTitle的例子:1:Ext.define('My.own.Window',{2:/**@readonly*/3:isWindow:true,4:5:config:{6:title:'TitleHere',7:8:bottomBar:{9:enabled:true,10:height:50,11:resizable:false12:}13:},14:15:constructor:function(config){16:this.initConfig(config);17:18:returnthis;19:},20:21:applyTitle:function(title){22:if(!Ext.isString(title)||title.length===0){23:alert('Error:Titlemustbeavalidnon-emptystring');24:}25:else{26:returntitle;27:}28:},29:30:applyBottomBar:function(bottomBar){31:if(bottomBar&&bottomBar.enabled){32:if(!this.bottomBar){33:returnExt.create('My.own.WindowBottomBar',bottomBar);34:}35:else{36:this.bottomBar.setConfig(bottomBar);37:}38:}39:}40:});以下是它的用法:1:varmyWindow=Ext.create('My.own.Window',{2:title:'HelloWorld',3:bottomBar:{4:height:605:}6:});7:8:alert(myWindow.getTitle());//alertsHelloWorld9:10:myWindow.setTitle('SomethingNew');11:12:alert(myWindow.getTitle());//alertsSomethingNew13:14:myWindow.setTitle(null);//alertsError:Titlemustbeavalidnon-emptystring15:16:myWindow.setBottomBar({height:100});//Bottombar'sheightischangedto1003.Statics静态成员可以使用statics配置项来定义1:Ext.define('Computer',{2:statics:{3:instanceCount:0,4:factory:function(brand){5://'this'instaticmethodsrefertotheclassitself6:returnnewthis({brand:brand});7:}8:},9:10:config:{11:brand:null12:},13:14:constructor:function(config){15:this.initConfig(config);16:17://the'self'propertyofaninstancereferstoitsclass18:this.self.instanceCount++;19:20:returnthis;21:}22:});23:24:vardellComputer=Computer.factory('