Ext talking about the example of class

Open the Ext API, as follows

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6C/4D/wKiom1VE1cSRRIyPAAH2pGkUjxs556.jpg "title=" ' 7[w ' e7yxswogfaa0xb[' 8r.png "alt=" Wkiom1ve1csrriypaah2pgkujxs556.jpg "/>

Find class This option

Move the mouse over config to see the following properties:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6C/49/wKioL1VE18aDY1dQAAEopcN2tug366.jpg "title=" b2c8~ E1RVVB{@}QVM ' Nb_oi.png "alt=" Wkiol1ve18ady1dqaaeopcn2tug366.jpg "/>

Okay, let's get started on the topic:

First of all, to talk about how to customize a class, in Ext, create a class is similar to other languages, but the expression is not the same, the following is the way to define a class

<!--*********************************************-->

<!--class Creation--
Ext.define (' Father ', {
Name: ' Unknown ',

Constructor:function (name) {
if (name) {
THIS.name = name;
Ext.Msg.alert (' I\ ' m hungry ', ' I want to eat ');
}
},

Eat:function () {
Ext.Msg.alert (' i\ ' m hungry,i want to eat ');
}
})
var aaron = ext.create (' Father ', ' Aaron ');

<!--*********************************************-->

Now that we know how to define a class, we need to know how he inherited it, using the Extend attribute in the following way:

Ext.define (' person ', {
Say:function (text) {alert (text);}
});

Ext.define (' Developer ', {
Extend: ' Person ',
Say:function (text) {this.callparent (["Print" +text]);}
});

Use Mixins to achieve multiple inheritance, as follows:

Ext.define (' Singer ', {
Sing:function () {
Alert ("For he ' s a jolly Good Fellow ...")
}
});

Ext.define (' Dancer ', {
Dance:function () {
Alert ("For he ' s a jolly Dance ...")
}
});

Ext.define (' musician ', {
Mixins: {
Tom: ' Singer ',
Jery: ' Dancer '
},
Sing:function () {
alert (123);
This.mixins.canSing.sing.call (this);
}
})

var kk=ext.create (' musician ');
Kk.sing ();
Kk.mixins.tom.sing.call (this);
Kk.dance ();

use alias to set the alias for the class:

<!--alias usage, note When using alias, the name must be lowercase- -
/*ext.define (' Myapp.coolpanel ', {
Extend: ' Ext.panel.Panel ',
Alias: [' Widget.coolpanel ', ' Widget.coolpanel2 '],
Hehe:function () {Ext.Msg.alert (' hehe ', ' hehe ')},
Title: ' yeah! '
});*/


//Create an instance with Ext.widget ()
/*ext.widget (' Coolpanel ', {
WIDTH:100,
HEIGHT:100,
Style: {
Color: ' #FFFFFF ',
BackgroundColor: ' #000000 '
},
RenderTo:Ext.getBody ()
});*/

//Created through Xtype
/*ext.widget (' Coolpanel ', {
WIDTH:200,
HEIGHT:200,
Items: [
{xtype: ' Coolpanel2 ', HTML: ' Foo '},
{xtype: ' Coolpanel2 ', HTML: ' Bar '}
],
RenderTo:Ext.getBody ()
});*/

<!--Alternateclassname's usage, it's a bit like alias.

/*Ext.define (' Developer ', {
Alternateclassname: [' coder ', ' Hacker '],
Code:function (msg) {
Alert (' Typing ... ' + msg ');
}
});

var Joe = ext.create (' Developer ');
Joe.code (' StackOverflow ');

var rms = ext.create (' Hacker ');
Rms.code (' Hack hack ');*/

<!--*********************************************-->

<!--Inheritablestatics defines a static method that can be inherited by a quilt class, similar to static, but static is not inherited by the quilt class--

/*Ext.define (' Human ', {
Inheritablestatics: {

Eat:function () {
Alert (' Eat ');
}
},
Say:function (text) {alert (text);}
});

Ext.define (' man ', {
Extend: ' Human '
});
Man.eat ();*/

<!--*********************************************-->

<!--*********************************************-->

/*uses and requires: Similar to the requires property, are references to some classes

Uses--The referenced class can be loaded after the class.

Requires--The referenced class must be loaded before the class.
*/
Ext.define (' Gird ', {
Uses: [' Boy '],
Getboy:function () {
Return ext.create (' Boy ');
},
Sleep:function () {
Alert (' Sleep ');
}
});

For the uses attribute, the boy class can be left behind, without error.
ext.define (' Boy ', {
Play:function () {
Alert (' Play ');
}
});


For the requires attribute, the boy class must be loaded before the grid class, or an error will be
Ext.define (' Boy ', {
Play:function () {
Alert (' Play ');
}
});

Ext.define (' Gird ', {
Requires: [' Boy '],
Getboy:function () {
Return ext.create (' Boy ');
},
Sleep:function () {
Alert (' Sleep ');
}
});
<!--*********************************************-->

<!--Cofig is mainly used to simplify parameters in the constructor--
/*Ext.define (' Father ', {
config:{
Name: ' LiLi ',
age:0
},

Constructor:function (config) {
Ext.Msg.alert (' message ', ' My name is ' +name+ ' i\ ' m ' +age+ ' old ');
This.initconfig (config);Except for this, nothing can be put in.

 },

eat:function () {
Ext.Msg.alert (' i\ ' m hungry,i want to eat ');
}
})

var aaron = ext.create (' Father ', {
Name: ' Huahua ',
Age:19
});
Alert (Aaron.getname ());*/


<!--*********************************************-->

OK, this section will be here, small sea I also tired, tomorrow continue to learn the things to share with you

This article is from the "Small Sea" blog, please be sure to keep this source http://9197823.blog.51cto.com/9187823/1641333

Ext talking about the example of class