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()方法创建命名空间。

语法：Ext.namespace(“命名空间”)

示例：Ext.namespace("com.aptech");

三、Extjs OOP

在Extjs中创建类和javascript有些不同，我们会使用他封装好的东西，而不全是基于javascript语法。站在巨人的肩膀上，确实有些高 处不胜寒。所以，深刻了解javascript基础对于日后的拓深十分必要，相信我吧。

我们通常会基于命名空间创建新类，按照java的设计思想，会有封装、继承和多态。Extjs也不例外，而且Extjs为OOP做了很多基础工作，使用起 来非常模式化。一个类至少应该有private和public成员，且可以派生出子类，并能重写父类的方法。那么，让我们来看看Extjs是如何做到的。

Ext.namespace("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){

this.name = name;

this.sex = sex;

}

//测试

var student = new Student("李赞红", "男");

alert("姓名：" + student.name + "/r/n性别：" + student.sex);

这个一定看得懂，如果看不懂，我只能表示深深的遗憾了，您不适合地球，回你的老本营火星去吧。

如果用json对象作为构造函数的参数呢？

Student = function(config){

this.name = config.name;

this.sex = config.sex;

}

//测试

var student = new Student({name: "李赞红", sex: "男"});

alert("姓名：" + student.name + "/r/n性别：" + student.sex);

嘿，果然万变不离其宗啊。换汤不换药的把戏骗不了咱们。但是，等等，请等等，如果类的成员特别多，十个，二十个，一百个，赋值语句岂不是很多很繁琐？你能 想到这一点实在太聪明了，不过，Jack更聪明，他早想到了，于是有了下面的代码：

Student = function(config){

Ext.apply(this, config);

}

//测试

var student = new Student({name: "李赞红", sex: "男"});

alert("姓名：" + student.name + "/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.name = "张海军";

this.sex = "男";

Ext.apply(this, config);

}

//测试

var student = new Student({name: "李赞红", sex: "男", birthday: new Date()});

alert("姓名：" + student.name + "/r/n性别：" + student.sex + "/r/n生日：" + student.birthday);

从下面结果看出，属性name和sex均被覆盖，且添加了新成员birthday。

姓名：李赞红

性别：男

生日：Fri May 01 2009 07:59:39 GMT+0800

Student = function(config){

this.name = "张海军";

this.sex = "男";

Ext.applyIf(this, config);

}

//测试

var student = new Student({name: "李赞红", sex: "男", birthday: new Date()});

alert("姓名：" + student.name + "/r/n性别：" + student.sex + "/r/n生日：" + student.birthday);

结果如下：

姓名：张海军

性别：男

生日：Fri May 01 2009 08:02:33 GMT+0800

哈，“张海军”终于没被“李赞红”替换了。

一、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()方法创建命名空间。

语法：Ext.namespace(“命名空间”)

示例：Ext.namespace("com.aptech");

三、Extjs OOP

在Extjs中创建类和javascript有些不同，我们会使用他封装好的东西，而不全是基于javascript语法。站在巨人的肩膀上，确实有些高 处不胜寒。所以，深刻了解javascript基础对于日后的拓深十分必要，相信我吧。

我们通常会基于命名空间创建新类，按照java的设计思想，会有封装、继承和多态。Extjs也不例外，而且Extjs为OOP做了很多基础工作，使用起 来非常模式化。一个类至少应该有private和public成员，且可以派生出子类，并能重写父类的方法。那么，让我们来看看Extjs是如何做到的。

Ext.namespace("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){

this.name = name;

this.sex = sex;

}

//测试

var student = new Student("李赞红", "男");

alert("姓名：" + student.name + "/r/n性别：" + student.sex);

这个一定看得懂，如果看不懂，我只能表示深深的遗憾了，您不适合地球，回你的老本营火星去吧。

如果用json对象作为构造函数的参数呢？

Student = function(config){

this.name = config.name;

this.sex = config.sex;

}

//测试

var student = new Student({name: "李赞红", sex: "男"});

alert("姓名：" + student.name + "/r/n性别：" + student.sex);

嘿，果然万变不离其宗啊。换汤不换药的把戏骗不了咱们。但是，等等，请等等，如果类的成员特别多，十个，二十个，一百个，赋值语句岂不是很多很繁琐？你能 想到这一点实在太聪明了，不过，Jack更聪明，他早想到了，于是有了下面的代码：

Student = function(config){

Ext.apply(this, config);

}

//测试

var student = new Student({name: "李赞红", sex: "男"});

alert("姓名：" + student.name + "/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.name = "张海军";

this.sex = "男";

Ext.apply(this, config);

}

//测试

var student = new Student({name: "李赞红", sex: "男", birthday: new Date()});

alert("姓名：" + student.name + "/r/n性别：" + student.sex + "/r/n生日：" + student.birthday);

从下面结果看出，属性name和sex均被覆盖，且添加了新成员birthday。

姓名：李赞红

性别：男

生日：Fri May 01 2009 07:59:39 GMT+0800

Student = function(config){

this.name = "张海军";

this.sex = "男";

Ext.applyIf(this, config);

}

//测试

var student = new Student({name: "李赞红", sex: "男", birthday: new Date()});

alert("姓名：" + student.name + "/r/n性别：" + student.sex + "/r/n生日：" + student.birthday);

结果如下：

姓名：张海军

性别：男

生日：Fri May 01 2009 08:02:33 GMT+0800

哈，“张海军”终于没被“李赞红”替换了。