EtJs4新类库特性详解及JS新语法扩展

1、ExtJs4 新类库特性及 JS 新语法扩展讲师：风舞烟目录:、ExtJS4对JS语法的扩展js动态引用加载JS基本数据类型 定时事件执行 健盘导航事件、ExtJs4的新类库特性Ext.defi neCon figurati on酉己置组合属性(mixins ) 类的静态成员属性(statics)概述：ExtJs4对JS基本语法的进行了新的扩展，包括动态加载、类的封装等ExtJS 4的类系统(class system )进行了一次重大重构，ExtJS4的新架构就是基 于这套新的类系统构建的，因此有必要先了解以下这个 class system I:最佳命名规范 实践(其实是要求必须遵照它的规范)

2、I:解释健壮类系统的重要性ExtJS 4有300多个类，社区里有20w+不同背景的开发者，提供一个好的代码架 构是个巨大的挑战：? 易学，学习成本低?快速开发，容易调试和发布? 组织良好，可扩展可维护JavaScript是个基于原型链继承的语言，没有类的概念。而且JavaScript语言特点就是松散和自由，实现一个同样的功能，可以有很多种方式，但是如果放任它的松 散和自由，就很难维护和重用代码。面向对象编程绝大部分都是基于类的。基于类的编程语言通常需要强类型，提供代 码封装，并且有标准的编码习惯，ExtJS就是能做到既有面向对象编程的规范性,又能做到JavaScript的灵活性II.命名规范命

3、名规范，使用一致的命名规范可以让你的代码结构清晰，可读性强。1. Classes 类类名只能包含字母数字，不推荐使用数字，除非是常用词。不要用下划线中化线等 非字母数字字符。?MyCompa ny.useful_util.Debug_Toolbar不合法?MyCompany.util.Base64 合法类应该组织在包或者说命名空间下面，并且至少要有一个顶层命名空间，例如:MyCompa ny.data.CoolProxyMyCompa ny .Applicati on顶层命名空间和真正的类，应该采用驼峰式命名，其他一律小写，例如：MyCompa ny.form.actio n.AutoLoad

4、非Ext官方类，不可以在Ext顶层命名空间下（这是为了防止冲突）首字母组合词也要采用驼峰式命名，例如：Ext.data.JsonProxy 而不是 Ext.data.JSONProxyMyCompany.util.HtmlParser 而不是 MyCompary.parser.HTMLParserMyCompany.server.Http 而不是 MyCompany.server.HTTP2. Source Files 源文件类的命名和源文件存放路径是对应的，例如:?Ext.util.Observable 存放在 path/to/src/Ext/util/Observable.js?Ext.f

5、orm.action.Submit 存放在 path/to/src/Ext/form/action/Submit.js?MyCompa ny .chart.axis.Numeric 存放在path/to/src/MyCompa ny/chart/axis/Numeric.js这里面的path/to/src 就是程序跟目录下的那个 app目录，所有类都应该这样组织,保证维护性3方法和成员变量? 和类名一样只能用字母和数字，其他符号不可以? 同样是驼峰命名，但是首字母小写，首字母组合词也如此 例如：合法的方法名：en codeUsi ngMd5(),getHtml()代替getHTML() ,ge

6、tJsonResponse()代替 getJSONResponse(),parseXmlContent() 代替parseXMLCo nte nt()合法的变量名：var isGoodName; , var base64E ncoder, var xmlReader , varhttpServer4. Properties 属性?跟成员变量一致?如果是常量Ext.MessageBox.YES = "Yes"Ext.MessageBox.NO = "No"MyCompa ny.alie n.Math.PI = "4.13"第一部分：Ex

7、tJS4对JS语法的扩展一、动态引用加载ExtJs4有庞大的类型库，很多类可能在当前的页面根本不会用到，我们可以引入动 态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。1.动态引用外部Js/加载配置可用Ext.Loader.setConfig( enabled:true );/动态引用“luxl"目录下所有Js文件类，映射到对应命名空间Ext.Loader.setPath('Ext.ux','./ux/');2.动态加载类/加载单个类Ext.require('Ext.window.Window');/加载多个Ext.

8、require('Ext.grid.*','Ext.data.*','Ext.util.*','Ext.grid.PagingScroller')；/加载所有类，除了 Ext.data.*”之外Ext.exclude('Ext.data.*').require('*');二、基本数据类型ExtJs支持数值型、字符串型、日期型、布尔型等基本数据类型，内容比较简单，下面演示基本的声 明用法，以及类型转换。/定义一个日期类型的数据var datel = new Date("2011-11-12&

9、quot;);var date = new Date(2011, 11, 12, 12, 1, 12);/转化为字符串型alert(date.toLocaleDateString();/转化为数值型alert(Number(date);/布尔型，假var myFalse = new Boolean( false );/真var myBool = new Boolean( true );/定义数值var num = new Number(45.6);alert(num);四、函数执行时间控制主要用两个方面，1.让某个函数等待一段时间后自动执行。2.然某个函数按照一定频率反复执行。1.函数等待执行

10、实现一个功能，页面加载完毕后，等待 3秒后弹岀提示。1var func1 = function(name1, name2) Ext.Msg.alert("3秒钟后自动执行","你好，"+ name1 +"、"+ name2 +"!");23;4Ext.defer(func1,3000,this ," 张三","李四");52.函数按照一定频率反复执行让mydiv每隔一秒更新一次显示当前时间，10秒又自动停止更新：/周期执行var i = 0;vartask =run: fun

11、 ctio n () Ext.fly('mydiv').update(new Date().toLocaleTimeString();if (i > 10) Ext.TaskMa nager.stop(task);i+;,in terval: 1000Ext.TaskMa nager.start(task);四、键盘事件侦听1.Ext.KeyMap通过Ext.KeyMap可以建立键盘和用户动作（Actions ）之间的映射。下面看看例子，页面html沿用Ext.Updater 部分。var f = function （） alert（"B被按下"）;v

12、ar map = new Ext.KeyMap(Ext.getDoc(),key: Ext.EventObject.B,fn: f, key:"bc",fn:function () alert('b,c其中一个被按下');,key:"x",ctrl:true ,shift:true ,alt:true ,fn:function () alert('Control + shift +alt+ x组合键被按下.')；,stopEvent:true, key:"a",ctrl:true ,fn:functio

13、n () alert('Control+A全选事件被阻止，自定义事件执行！'); ,stopEvent:true);2.Ext.KeyNavExt.KeyNav 主要是用来绑定方向键的，已支持的键：enter, left, right, up, down, tab, esc, pageUp,pageDown, del, home, end,现在通过它来实现鼠标控制层移动的功能：var div1 = Ext.get("div1");var nav =new Ext.KeyNav(Ext.getDoc(), "left":function(e

14、) div1.setXY(div1.getX() - 1, div1.getY();,"right":function(e) div1.setXY(div1.getX() + 1, div1.getY();,"up":function(e) div1.move("up",1);,"down":function(e) div1.moveTo(div1.getX(), div1.getY() + 1);,"enter":function (e) );第二部分：ExtJs4的新类库特性III.实践一下

15、1. Declaratio n声明1.1老的方式如果你使用过ExtJS 3或者之前的版本，可能会熟悉Ext.extend，可以用来创建一个类var MyWi ndow = Ext.exte nd(Object, . );这个方法很容易就可以声明一个类并继承自另一个类，但是也有缺陷My.cool.Window = Ext.extend(Ext.Window, . );这个例子中我们需要把类定义在命名空间里，并继承自Ext.Window类，但是有两个问题：1. My.cool必须之前定义过，这个命名空间必须已经存在2. Ext.Wi ndow 必须已经加载第一条通常可以使用Espac

16、e (同Ext.ns )解决，这个方法会把不存在的命名 空间都创建出来，无聊的是你必须记得在Ext.exte nd之前加上这句话Ext .n s('My.cool');My.cool.Window = Ext.extend(Ext.Window, . );第二个问题，ExtJS4以前的版本都不好解决依赖问题，因此通常是引入ext-all.js1.2新的方式ExtJS 4消除了这些弊端，只需要记住一个方法：Exldefi ne，基本语法如下Ext.defi ne(className, members, on ClassCreated);?className要声明的类的名字?mem

17、bers 一个对象，包含类成员?on ClassCreated 一个可选的回调函数，因为新的异步加载机制，这个回调函数会很有用，当所有依赖已经引入，并且类完全创建好了之后，这个函数会被 调用例子Ext.defi ne('My.sample.Pers on', n ame: ' Unknown',con structor: fun cti on(n ame) if (n ame) this .n ame = n ame;,eat: fun cti on( foodType) alert(this .n ame + " is eat in g: "

18、; + foodType););var aar on = Ext.create('My.sample.Pers on', 'Aar on');aaron.eat("Salad"); / alert("Aaron is eating: Salad");注意这里创建一个新的 My.sample.Person 实例使用的是Ext.create() 方法，使用new 关键字也可以创建实例(new My.sample.Perso n()，但是不推荐使用new，应该养成使用Ext.create 的习惯，因为这样可以利用到动态加载的好处

19、继承让我们对比一下 Extjs 3 和Extjs 4 自定义window 时的代码吧！|xEnter your neme:下面是Extjs3 的代码： Ext. namespace("MyApp");MyApp.MyWi ndow = Ext.exte nd(Ext.Wi ndow, title: "Welcome!", in itComp onent: function()Ext.apply(this, items: xtype: "textfield",n ame: "tfName",fieldLabel: &

20、quot;E nter your n ame")；MyApp.MyWi ndow.superclass.i nitComp onen t.apply(this, argume nts););var win = new MyApp.MyWi ndow();wi n.show();可以看到我们必须使用 Espace 来注册自定义的命名空间， 否则抛出MyApp未定 义的异常信息。与此同时，若 Ext.Wi ndow 没有完成加载，那么也会抛出 Ext.Wi ndow 未 定义的异常信息。而 Extjs 4 就省去了这个麻烦。下面是 Extjs 4的代码：Ext.define

21、("MyApp.MyWindow", exte nd: "Ext.Wi ndow",title: "Welcome!",in itComp onent: function()this.items = xtype: "textfield",n ame: "tfName",fieldLabel: "E nter your n ame"this.callPare nt(argume nts););var win = Ext.create("MyApp.MyWi ndow&

22、quot;);wi n.show();Extjs 4中以字符串的形式定义类和引用父类，所以并不存在该类未定义的说法。Extjs 4的ClassManager 会检查Ext.Window是否已完成加载并已定义，若没有则推迟MyApp.MyWindow的实例化并自动完成Ext.Window的加载。框架会为我们管理各类的加载顺序，并且 Ext.defi ne会自动监测和创建省命名空间，省心多了。另外我们可以看到，Exjts 3中调用父类方法的语句为MyApp.MyWindow.superclass.initComponent.apply(this, arguments)，而 Extjs 4就简约为

23、this.callParent(arguments)。对于 override 的方法使用 this.callParent(arguments)就好比如 C# 的 override 方法中使用Base.方法名(参数1.)。用于把子类的参数传递到父类的方法中Ext.defi ne("Pare nt",con structor: function(n ame)this .n ame = n ame;)；Ext.defi ne("Child",exte nd: "Pare nt",con structor: function(n ame, s

24、ex)this.sex = se x;this.callPare nt( name);/参数为数组);var c = new Child("Joh n Huan g", "male");建议使用该形式实或者 var c = Ext.create("Child", "John Hua ng", "male"); /例化对象con sole .lo g(c. name);con sole .lo g(c.sex);建议使用Ext.create实例化对象，这样可以利用 Extjs 4 类系统的特性。E

25、xt.define是 Ext.ClassManager.create的别名，Ext.create 是Ext.ClassMa nager.i nsta ntiate的别名2. Co nfiguration配置(实例成员)置项属性(config ，自动创建 setters 和getters )/基本使用方式：Ext.defi ne("MyClass.A", con fig: n ame: "tom",sex: "male",show: fun cti on()/ con sole .lo g(this.c on fig. name); a

26、lert(this.c on fig. name););var objA = Ext.create("MyClass.A");objA.show();objA.setName("Joh n");objA.show();alert(objA.getName();alert(objA. name);config属性会将为其属性自动添加 setter和getter函数。若打算修改setter的行为，可以重写“ apply属性名”方法，该方法将为setter的内部实现。 具体代码如下：Ext.defi ne("MyClass.A", con

27、fig: n ame: "Joh n Huan g",sex: "male",applyName: function( val)this .n ame = "dev: " + val;,show: function()con sole .lo g(this .n ame););var a = Ext.create("MyClass.A");a.setName("Joh n");con sole.show(); / 控制台结果： dev: Joh n在自定义前我们需要理解config属性、当前类、

28、getter和setter的关系和原理。下面我们通过实例来理解吧Ext.defi ne("MyClass.A", con fig: n ame: "Joh n Huan g", sex: "male",applyName: function( val) this .n ame = "dev: " + val;);var a = Ext.create("MyClass.A");1. con sole .lo g(a.c onfig.n ame); /2. con sole .lo g(a .n a

29、me); /3. con sole .lo g(a.getName(); /4. con sole .lo g(a .n ame); /5. con sole .lo g(a.c onfig.n ame); /控制台结果：Joh n Hua ng 控制台结果：un defi ned控制台结果：dev: John控制台结果：dev: Joh n控制台结果：Joh n Hua ng语句3的结果是不是和我们预想的John Hua ng 有所出入呢？不是说调用setName 的时候才会调用applyName吗，为啥调用getName 的时候也会调用 applyName 呢？其实调用getName 的时

30、候不定会调用 applyName 方法，只有当语句2结果为undefined 时 才会有如此的效果，而且只有首次调用时会调用applyName 方法。如果在语句 3前执行了 = "John"或者 a.setName("John")，那么就不调用 applyName 方法。分析:其实getName 内部实现在首次调用和第N次调用时是不同的。首次调用getName 方法时的内部实现步骤如下：1. 检查对象是否有name属性，有则执行步骤2，无则执行步骤3 ；2. 返回name属性，并更新内部实现；3. 以con fig. name为参数执行 a

31、pplyName 函数，因为applyName 函数体为 =. ，就会添加name属性到对象中，然后更新内部实现。(若applyName 函数体无=.的语句，那么 getName 的返回值将是undefined )第N次调用getName 方法是的内部实现如下：fun ctio n() return thisq; ，直接返回对象的属性。结论：setter和getter是将config的成员属性复制(注意：为浅复制)为当前类的成 员属性，然后对成员属性进行后续操作。因此我们在重写 applyName 时需要遵守下列原则。不要修改config的成员属性值而在类内

32、部成员函数中访问 config的成员属性时建议如下操作：Ext.defi ne("MyClass.A", con fig: n ame: "Joh n Huan g",sex: "male",showName: fun cti on()var n ame = this .n ame | this.c onfig.n ame;con soleog(n ame);,updateName: function( val)this. name = val;);组合属性(mixins )组合是Extjs4的新特性，可用于实现多继承。该属性会以同步

33、方式加载类文件，并实例化 该类！基本用法：Ext.defi ne("MyClass.A", showA: fun cti on()con sole.log("A"););Ext.defi ne("MyClass.B", showB: fun cti on()con sole.log("B"););Ext.defi ne("MyClass.C", mixi ns: classA: "MyClass.A", classB: "MyClass.B",showC:

34、 function()con sole.log("C"););var objC = Ext.create("MyClass.C");objC.showA(); /控制台结果：AobjC.showB(); /控制台结果：BobjC.showC(); /控制台结果：C方法同名时情况1多个mixins 类拥有同名函数:Ext.defi ne("MyClass.A", show: function() con sole.log("A"););Ext.defi ne("MyClass.B", show:

35、function() con sole.log("B"););Ext.defi ne("MyClass.C", mixi ns: classA: "MyClass.A", classB: "MyClass.B");var objC = Ext.create("MyClass.C"); objC.show(); /控制台结果：A若Ext.defi ne("MyClass.C", mixi ns: classB: "MyClass.B", classA: &q

36、uot;MyClass.A");那么objC.show(); /控制台结果：B情况2mix ins类与当前类拥有同名函数：Ext.defi ne("MyClass.A", show: function()con sole.log("A"););Ext.defi ne("MyClass.C", mixi ns: classA: "MyClass.A",show: fun cti on()con sole.log("C"););var objC = Ext.create("MyClass.C");objC.show(); /控制台结果：C结论：方法的调用遵循最近优先原则，就是先查询直接类是否有该方法，有则调用，无则查 询mixins 中包含的类。情况3mixins类与父类拥有同名函数：Ext.defi ne("MyClass.A", show: function()con sole.log("A"););Ext.defi ne("MyClass.B", show: function