ExtJS之面向對象編程基本知識

1：支持命名空間

<script type="text/javascript">
// 定義 一個命名空間
Ext.namespace("Ext.wentao");
// 在命名空間上定義一個類
Ext.wentao.helloworld = Ext.emptyFn;
// 創建一個類的實例
new Ext.wentao.helloworld();
</script>

其中

Ext.wentao.helloworld = Ext.emptyFn;

等價於

Ext.wentao.helloworld = function(){};

2：支持類實例屬性

<script type="text/javascript">
Ext.namespace ("Ext.wentao"); // 自定義一個命名空間
Ext.wentao.Person = Ext.emptyFn; // 在 命名空間上自定義一個類
// 為自定義的類 增加一個 name 屬性，並賦值
Ext.apply (Ext.wentao.Person.prototype, {
name : "劉文濤"
});

var _person = new Ext.wentao.Person();// 實例化 自定義類
alert(_person.name);
_person.name = "張三";// 修改類name屬性
alert(_person.name);

</script>

3：支持類實例方法

<script type="text/javascript">
Ext.namespace("Ext.wentao"); // 自定義 一個命名空間
Ext.wentao.Person = Ext.emptyFn; // 在命名空間上自定義一個類
// 演示 類實例方法
Ext.apply(Ext.wentao.Person.prototype, {
name : "劉文濤",
sex : "男",
print : function() {
alert(String.format("姓名:{0}, 性別:{1}", this.name, this.sex));
}
});

var _person = new Ext.wentao.Person();// 實例化 自定義類
_person.print();


</script>

4：支持類靜態方法

<script type="text/javascript">

Ext.namespace("Ext.wentao"); // 自定義一個命名空間
Ext.wentao.Person = Ext.emptyFn; // 在命名空間上自定義一個類

// 演示類實例方法
Ext.apply(Ext.wentao.Person.prototype, {
name : " 劉文濤",
sex : "男",
print : function() {
alert (String.format("姓名:{0},性別:{1}", this.name, this.sex));
}
});

// 演示 類靜態方法
Ext.wentao.Person.print = function(_name, _sex) {
var _person = new Ext.wentao.Person();
_person.name = _name;
_person.sex = _sex;
_person.print(); // 此處調用類 實例方法，上面print是類 靜態方法
};

Ext.wentao.Person.print("張三", "女"); // 調用類 靜態方法

</script>

5：支持構造方法

<script type="text/javascript">
Ext.namespace("Ext.wentao"); //自定義一 個命名空間

//構造方法
Ext.wentao.Person = function(_cfg){
Ext.apply (this,_cfg);
};

//演示類實例方法
Ext.apply (Ext.wentao.Person.prototype, {
print:function(){
alert(String.format("姓 名:{0},性別:{1}",this.name,this.sex));
}
});

//演示 類靜態方法
Ext.wentao.Person.print = function(_name,_sex){
var _person = new Ext.wentao.Person ({name:_name,sex:_sex});
_person.print(); //此處調用類 實例方法，上面print是類 靜態方 法
};

Ext.wentao.Person.print("張三","女"); //調用類 靜 態方法
</script>

6：支持類繼承

<script type="text/javascript">

Ext.namespace("Ext.wentao"); // 自定義一個命名空間

// *******************父類*********************
// 構造 方法
Ext.wentao.Person = function(_cfg) {
Ext.apply(this, _cfg);
};

// 演示類實例方法
Ext.apply(Ext.wentao.Person.prototype, {
job : "無 ",
print : function() {
alert(String.format("姓名:{0},性別:{1},角色: {2}", this.name,
this.sex, this.job));
}
});

// *******************子類1*********************
Ext.wentao.Student = function(_cfg) {
Ext.apply(this, _cfg);
};

Ext.extend(Ext.wentao.Student, Ext.wentao.Person, {
job : "學生"
});

var _student = new Ext.wentao.Student({
name : "張三",
sex : "女"
});
_student.print(); // 調用 父類方法

</script>

7：支持類實例 方法重寫

<script type="text/javascript">
Ext.namespace ("Ext.wentao"); // 自定義一個命名空間

// *******************父類 *********************
// 構造方法
Ext.wentao.Person = function(_cfg) {
Ext.apply(this, _cfg);
};

// 演示類實例方法
Ext.apply (Ext.wentao.Person.prototype, {
job : "無",
print : function() {
alert(String.format("姓名:{0},性別:{1},角色:{2}", this.name,
this.sex, this.job));
}
});

// *******************子類1*********************
Ext.wentao.Student = function(_cfg) {
Ext.apply(this, _cfg);
};

// 重寫父類的 實例 方法
Ext.extend(Ext.wentao.Student, Ext.wentao.Person, {
job : "學生",
print : function() {
alert(String.format("{0}是一位{1}{2} ", this.name, this.sex,
this.job));
}
});

var _student = new Ext.wentao.Student({
name : "張三",
sex : "女"
});
_student.print(); // 調用 父類方法

</script>

8：支持命名空 間別名　

<script type="text/javascript">

Ext.namespace("Ext.wentao"); // 自定義一個命名空間

Wt = Ext.wentao; // 命名空間的別名

// *******************父類*********************
// 構造方 法
Wt.Person = function(_cfg) {
Ext.apply(this, _cfg);
};

// 演示 類實例方法
Ext.apply(Wt.Person.prototype, {
job : "無",
print : function() {
alert(String.format("姓名:{0},性別:{1},角色:{2}", this.name,
this.sex, this.job));
}
});

// *******************子類 1*********************
Wt.Student = function(_cfg) {
Ext.apply(this, _cfg);
};

// 重寫父類的 實例 方法
Ext.extend(Wt.Student, Ext.wentao.Person, {
job : "學生",
print : function() {
alert(String.format("{0}是一 位{1}{2}", this.name, this.sex,
this.job));
}
});

var _student = new Wt.Student({
name : "張q三",
sex : "女"
});
_student.print(); // 調用 父類方法


</script>

9：支持類別名

<script type="text/javascript">

Ext.namespace("Ext.wentao"); // 自定義一個命名空間

Wt = Ext.wentao; // 命名空間的別名

// *******************父類*********************
// 構造方法
Wt.Person = function (_cfg) {
Ext.apply(this, _cfg);
};

PN = Wt.Person; // 類別名

// 演示類實例方法
Ext.apply(PN.prototype, {
job : "無",
print : function() {
alert(String.format("姓名:{0},性別:{1},角色:{2}", this.name,
this.sex, this.job));
}
});

// *******************子類 1*********************
Wt.Student = function(_cfg) {
Ext.apply(this, _cfg);
};

ST = Wt.Student;

// 重寫父類的 實例 方法
Ext.extend(ST, PN, {
job : "學生",
print : function() {
alert(String.format("{0} 是一位{1}{2}", this.name, this.sex,
this.job));
}
});

var _student = new ST({
name : "張q三",
sex : "女"
});
_student.print(); // 調用 父類方法

</script>