Object-oriented understanding of JavaScript in ExtJS

1: Support namespaces
<script type= "Text/javascript" >
Define a Namespace
Ext.namespace ("Ext.wentao");
To define a class on a namespace
Ext.wentao.helloworld = EXT.EMPTYFN;

Create an instance of a class
New Ext.wentao.helloworld ();
</script>

which
Ext.wentao.helloworld = EXT.EMPTYFN;

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


2: Support class Instance properties
<script type= "Text/javascript" >
Ext.namespace ("Ext.wentao"); Customizing a Namespace
Ext.wentao.Person = EXT.EMPTYFN; Customizing a class on a namespace

Add a Name property to the custom class and assign a value
Ext.apply (Ext.wentao.Person.prototype, {
Name: "Liu Wentao"
})

var _person = new Ext.wentao.Person ()//Instantiate custom class
alert (_person.name);
_person.name = "John";//Modify Class Name property
alert (_person.name);
</script>


3: Support class instance method
<script type= "Text/javascript" >
Ext.namespace ("Ext.wentao"); Customizing a Namespace
Ext.wentao.Person = EXT.EMPTYFN; Customizing a class on a namespace

Demo class instance method
Ext.apply (Ext.wentao.Person.prototype, {
Name: "Liu Wentao",
Sex: "Male",
Print:function () {
Alert (String.Format ("name: {0}, Sex: {1}", This.name,this.sex));
}
})

var _person = new Ext.wentao.Person ()//Instantiate custom class
_person.print ();
</script>


4: Support class static method
<script type= "Text/javascript" >
Ext.namespace ("Ext.wentao"); Customizing a Namespace
Ext.wentao.Person = EXT.EMPTYFN; Customizing a class on a namespace

Demo class instance method
Ext.apply (Ext.wentao.Person.prototype, {
Name: "Liu Wentao",
Sex: "Male",
Print:function () {
Alert (String.Format ("name: {0}, Sex: {1}", This.name,this.sex));
}
})

Demo Class static methods
Ext.wentao.Person.print = function (_name,_sex) {
var _person = new Ext.wentao.Person ();
_person.name = _name;
_person.sex = _sex;
_person.print (); The class instance method is called here, and the print above is a class static method
}

Ext.wentao.Person.print ("John", "female"); Calling class static methods
</script>


5: Supporting the construction method
<script type= "Text/javascript" >
Ext.namespace ("Ext.wentao"); Customizing a Namespace

Construction method
Ext.wentao.Person = function (_cfg) {
Ext.apply (THIS,_CFG);
}

Demo class instance method
Ext.apply (Ext.wentao.Person.prototype, {
Print:function () {
Alert (String.Format ("name: {0}, Sex: {1}", This.name,this.sex));
}
})

Demo Class static methods
Ext.wentao.Person.print = function (_name,_sex) {
var _person = new Ext.wentao.Person ({name:_name,sex:_sex});
_person.print (); The class instance method is called here, and the print above is a class static method
}

Ext.wentao.Person.print ("John", "female"); Calling class static methods
</script>


6: Support class inheritance
<script type= "Text/javascript" >
Ext.namespace ("Ext.wentao"); Customizing a Namespace

Parent class *********************
Construction method
Ext.wentao.Person = function (_cfg) {
Ext.apply (THIS,_CFG);
}

Demo class instance method
Ext.apply (Ext.wentao.Person.prototype, {
Job: "None",
Print:function () {
Alert (String.Format ("name: {0}, Sex: {1}, role: {2}", This.name,this.sex,this.job));
}
})

Sub Class 1*********************

Ext.wentao.Student = function (_cfg) {
Ext.apply (THIS,_CFG);
}

Ext.extend (ext.wentao.student,ext.wentao.person,{
Job: "Student"
})

var _student = new Ext.wentao.Student ({name: "John", Sex: "female"});
_student.print (); Calling the parent class method
</script>


7: Support class instance method overrides
<script type= "Text/javascript" >
Ext.namespace ("Ext.wentao"); Customizing a Namespace

Parent class *********************
Construction method
Ext.wentao.Person = function (_cfg) {
Ext.apply (THIS,_CFG);
}

Demo class instance method
Ext.apply (Ext.wentao.Person.prototype, {
Job: "None",
Print:function () {
Alert (String.Format ("name: {0}, Sex: {1}, role: {2}", This.name,this.sex,this.job));
}
})

Sub Class 1*********************

Ext.wentao.Student = function (_cfg) {
Ext.apply (THIS,_CFG);
}

Overriding an instance method of a parent class
Ext.extend (ext.wentao.student,ext.wentao.person,{
Job: "Student",
Print:function () {
Alert (String.Format ("{0} is a {1}{2}", This.name,this.sex,this.job));
}
})

var _student = new Ext.wentao.Student ({name: "John", Sex: "female"});
_student.print (); Calling the parent class method
</script>

8: namespace alias support
<script type= "Text/javascript" >
Ext.namespace ("Ext.wentao"); Customizing a Namespace

Wt = Ext.wentao; Aliases for namespaces

Parent class *********************
Construction method
Wt.person = function (_cfg) {
Ext.apply (THIS,_CFG);
}

Demo class instance method
Ext.apply (Wt.Person.prototype, {
Job: "None",
Print:function () {
Alert (String.Format ("name: {0}, Sex: {1}, role: {2}", This.name,this.sex,this.job));
}
})

Sub Class 1*********************

Wt.student = function (_cfg) {
Ext.apply (THIS,_CFG);
}

Overriding an instance method of a parent class
Ext.extend (wt.student,ext.wentao.person,{
Job: "Student",
Print:function () {
Alert (String.Format ("{0} is a {1}{2}", This.name,this.sex,this.job));
}
})

var _student = new Wt.student ({name: "Zhang Q III", Sex: "female"});
_student.print (); Calling the parent class method
</script>

9: Support class Alias
<script type= "Text/javascript" >
Ext.namespace ("Ext.wentao"); Customizing a Namespace

Wt = Ext.wentao; Aliases for namespaces

Parent class *********************
Construction method
Wt.person = function (_cfg) {
Ext.apply (THIS,_CFG);
}

PN = Wt.person; Class Alias

Demo class instance method
Ext.apply (Pn.prototype, {
Job: "None",
Print:function () {
Alert (String.Format ("name: {0}, Sex: {1}, role: {2}", This.name,this.sex,this.job));
}
})

Sub Class 1*********************

Wt.student = function (_cfg) {
Ext.apply (THIS,_CFG);
}

ST = wt.student;

Overriding an instance method of a parent class
Ext.extend (st,pn,{
Job: "Student",
Print:function () {
Alert (String.Format ("{0} is a {1}{2}", This.name,this.sex,this.job));
}
})

var _student = new ST ({name: "Zhang Q III", Sex: "female"});
_student.print (); Calling the parent class method
</script>