ExtJs基础语法

ExtJs基础语法
⼀、javascript类的定义
在javascript中，通过创建⼀个构造函数来定义⼀个类，然后通过prototype来扩展类的功能。

假设我们定义⼀个螃蟹类：
Crab = function(){
this.legs = 10;
}
Crab.prototype = {
say: function(){
alert("我是⼀只螃蟹，我有" + this.legs + "只脚，横⾏霸道是我的天性");
}
};
//测试
var crab = new Crab();
alert(crab.legs);
crab.say();
prototype是javascript⼀个⾮常重要的功能，能动态的为对象添加任何新的⽅法。

Extjs就是基于prototype实现的OOP机制。

⼆、Extjs命名空间的定义
命名空间（namespace）类似于java中的包，⽤来对⼯程中的类进⾏有效管理。

命名空间的层次结构使⽤“.”来划分。

Ext通过namespace()⽅法创建命名空间。

语法：space(“命名空间”)
⽰例：space("com.aptech");
三、Extjs OOP
在Extjs中创建类和javascript有些不同，我们会使⽤他封装好的东西，⽽不全是基于javascript语法。

站在巨⼈的肩膀上，确实有些⾼处不胜寒。

所以，深刻了解javascript基础对于⽇后的拓深⼗分必要，相信我吧。

我们通常会基于命名空间创建新类，按照java的设计思想，会有封装、继承和多态。

Extjs也不例外，⽽且Extjs为OOP做了很多基础⼯作，使⽤起来⾮常模式化。

⼀个类⾄少应该有private和public成员，且可以派⽣出⼦类，并能重写⽗类的⽅法。

那么，让我们来看看Extjs是如何做到的。

space("com.aptech");
com.aptech.First = function(){
//私有成员
var kiss = "中华⼈民共和国";
//私有⽅法
//公有⽅法
return {
//公有成员
init: function(){
alert("init");
alert(kiss);
},
//公有成员
method: function(){
alert("method");
}
};
};
我们定义了⼀个类First，这实在是⼀个没有任何业务意义的类，只是为了说明⽅便。

First位于com.aptech命名空间中，有⼀个私有成员kiss，并且向外部暴露了两个⽅法init()和method()。

其实，在function和return之间定义的成员全总是private，⽽在 ruturn内部定义的成员全部是public，如果⼤家的javascipt基础扎实的话，这段代码并不难理解，我们定义了⼀个匿名构造函数，函数中的变量是局部变量，外部⽆法访问，返回⼀个对象，对象是以json格式定义的，该对象中定义的⽅法⾃然可以访问了。

javascipt本⾝不⽀持继承，但是我们可以模拟。

继承说穿了就是⼦类将⽗类的成员据为已有，专业点就是“成员复制”，即可以复制成员变量，也可以复制成员⽅法。

我们定义下⾯的⽅法完成此功能：
Ext.extend⽅法是⽤来实现类的继承。

extend(Object subclass,Object superclass,[Object overrides] : Object
第⼀个参数：⼦类
第⼆个参数：⽗类
第三个参数：要覆盖的属性。

这⾥需要强调⼀下，⼦类继承下来的是⽗类中通过superclass.prototype ⽅式定义的属性（包括⽤此⽅法定义的函数）。

var extend = function(child, father){
child.prototype = father.prototype;
现在，我们定义⼀个螃蟹的⼦类——蟹将，螃蟹成精变成了⼈，由原来的10只脚变成2只脚，但狗改不了吃屎，⾏为不会改变，依旧横⾏霸道。

GenCrab = function(){this.legs = 2;};
extend(GenCrab, Crab);
var gc = new GenCrab();
gc.say();
就这样，⼀个新类产⽣了。

不过，在Extjs中有更加优雅的做法。

我们定义⼀个类Second，继承⾃First，看看Extjs是如何做的。

//创建⼦类
com.aptech.Second = function(){
com.aptech.Second.superclass.constructor.apply(this);//调⽤⽗类构造⽅法
}
//com.aptech.Second⼦类继承⾃⽗类com.aptech.First
Ext.extend(com.aptech.Second, com.aptech.First, {
//新⽅法
fun: function(i){
return i * i * i;
},
//重写的⽅法
method: function(){
alert("Second::method")
}
});
//测试
var second = new com.aptech.Second();
alert(second.fun(5));
second.method();
哈哈，简直太优雅了，不仅可以添加新⽅法，还可以重写⽗类的⽅法（话外⾳：这不是多态的表现形式吗？）。

这⼀切都是由
Ext.extend()搞定的，这个⽅法有点复杂，但他的实现原理是相同的。

四、配置(config)选项
在Extjs中，初始化对象时，⼤量使⽤了config这个参数。

不要恐惧，只是⼀个json对象⽽已，不过，config为Extjs⽴下了不少汗马功劳。

假设定义了⼀个学⽣类（Student），有姓名和性别两个属性，并且通过构造函数为属性初始化：
Student = function(name, sex){
= name;
this.sex = sex;
}
//测试
var student = new Student("李赞红", "男");
alert("姓名：" + + "/r/n性别：" + student.sex);
这个⼀定看得懂，如果看不懂，我只能表⽰深深的遗憾了，您不适合地球，回你的⽼本营⽕星去吧。

如果⽤json对象作为构造函数的参数呢？
Student = function(config){
= ;
this.sex = config.sex;
}
//测试
var student = new Student({name: "李赞红", sex: "男"});
alert("姓名：" + + "/r/n性别：" + student.sex);
嘿，果然万变不离其宗啊。

换汤不换药的把戏骗不了咱们。

但是，等等，请等等，如果类的成员特别多，⼗个，⼆⼗个，⼀百个，赋值语句岂不是很多很繁琐？你能想到这⼀点实在太聪明了，不过，Jack更聪明，他早想到了，于是有了下⾯的代码：
Student = function(config){
Ext.apply(this, config);
}
//测试
var student = new Student({name: "李赞红", sex: "男"});
alert("姓名：" + + "/r/n性别：" + student.sex);
Ext定义了⼀个名叫apply()的⽅法，作⽤是将第⼆个参数的成员赋给第⼀个参数。

现在，不管config中有多少个成员都没问题了。

五、Ext.apply()和Ext.applyIf()
前⾯我们知道了Ext.apply(obj, config)⽅法的作⽤，还有另⼀个⽅法applyIf(obj, config)，从名字上看得出来，applyIf()需要满⾜某种条件，实在是太棒了，这么复杂的问题都没逃过你的法眼。

事先预告⼀下这两个⽅法的区别，然后再通过例⼦来说明：apply会将config和obj参数的同名属性值覆盖，并且将config其他属性添加到obj中；applyIf不会将config和obj参数的同名属性覆盖，只将config其他属性添加到obj中。

也就是说，obj没有⽽config 中有的属性最终都会复制到obj中，不同的是相同属性值是否会被覆盖的问题。

例⼦能说明⼀切问题。

Student = function(config){
= "张海军";
this.sex = "男";
Ext.apply(this, config);
}
//测试
var student = new Student({name: "李赞红", sex: "男", birthday: new Date()});
alert("姓名：" + + "/r/n性别：" + student.sex + "/r/n⽣⽇：" + student.birthday);
从下⾯结果看出，属性name和sex均被覆盖，且添加了新成员birthday。

姓名：李赞红
性别：男
⽣⽇：Fri May 01 2009 07:59:39 GMT+0800
Student = function(config){
= "张海军";
this.sex = "男";
Ext.applyIf(this, config);
}
//测试
var student = new Student({name: "李赞红", sex: "男", birthday: new Date()});
alert("姓名：" + + "/r/n性别：" + student.sex + "/r/n⽣⽇：" + student.birthday);
结果如下：
姓名：张海军
性别：男
⽣⽇：Fri May 01 2009 08:02:33 GMT+0800
哈，“张海军”终于没被“李赞红”替换了。