????打開ext的API，如下

找到Class這個選項

將鼠標(biāo)移到config那里可以看到有以下屬性：

????好了，讓我們開始進(jìn)入主題：

????首先，來講講如何自定義一個類，在ext中，創(chuàng)建一個類其實與其他語言差不多，只是表達(dá)的方式不一樣而已，下面是定義一個類的方法

????

<!--*********************************************-->
????
????<!--類的創(chuàng)建-->
????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');
????????
??<!--*********************************************-->

? 既然，我們知道了如何定義一個類了，那么我們就要知道他是如何繼承的了，用到上圖中的extend這個屬性 ，方法如下 ：

Ext.define('Person', {
??? say: function(text) { alert(text); }
});

Ext.define('Developer', {
??? extend: 'Person',
??? say: function(text) { this.callParent(["print "+text]); }
});

用mixins來實現(xiàn)多繼承，如下：

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();
? ? ? ?

????用alias來為類設(shè)置別名：

????<!--alias的用法，使用alias時注意，名稱必須為小寫-->
?? ??? ?/*Ext.define('MyApp.CoolPanel', {
?? ??? ??? ?extend:'Ext.panel.Panel',
?? ??? ??? ?alias: ['widget.coolpanel','widget.coolpanel2'],
?? ??? ??? ?hehe:function(){Ext.Msg.alert('hehe','hehe')},
?? ??? ??? ?title: 'Yeah!'
?? ??? ?});*/
?? ??? ?

?? ??? ?//通過Ext.widget()創(chuàng)建實例 ?
?? ??? ?/*Ext.widget('coolpanel', {
?? ??? ??? ?width : 100, ?
?? ??? ??? ?height : 100 ,
?? ??? ??? ?style: {
?? ??? ??? ??? ??? ??? ?color: '#FFFFFF',
?? ??? ??? ??? ??? ??? ?backgroundColor:'#000000'
?? ??? ??? ??? ??? ?},
?? ??? ??? ?renderTo:Ext.getBody()
?? ??? ?});*/
?? ??? ?
?? ??? ?//通過xtype創(chuàng)建
?? ??? ? /*Ext.widget('coolpanel', {
?? ??? ??? ?width : 200, ?
?? ??? ??? ?height : 200 ,
?? ??? ??? ?items: [ ?
??????????? {xtype: 'coolpanel2', html: 'Foo'}, ?
??????????? {xtype: 'coolpanel2', html: 'Bar'}
?? ??? ??? ?],
?? ??? ??? ?renderTo:Ext.getBody()
?? ??? ?});*/

????<!--alternateClassName的用法，跟alias有點(diǎn)類似-->

?? ??? ??? ?/*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 定義靜態(tài)方法，可以被子類繼承，類似于static，但static是不可以被子類繼承-->
?? ??? ?
?? ??? ?/*Ext.define('Human', { ?
?? ??? ??? ?inheritableStatics : { ?
?? ??? ??? ?
?? ??? ??? ??? ?eat : function(){ ?
?? ??? ??? ??? ??? ?alert('eat'); ?
?? ??? ??? ??? ?} ?
?? ??? ??? ?}, ?
?? ??? ??? ?say: function(text) { alert(text); } ?
?? ??? ?}); ?
?
?? ??? ?Ext.define('Man', { ?
?? ??? ??? ?extend : 'Human' ?
?? ??? ?});
?? ??? ?Man.eat(); */
?? ??? ?
?? ??? ?<!--*********************************************-->

????????<!--*********************************************-->
?? ??? ?
?? ??? ?/*uses 和 requires : 與requires屬性類似,都是對某些類進(jìn)行引用

?? ??? ?uses -- 被引用的類可以在該類之后才加載.

?? ??? ?requires -- 被引用的類必須在該類之前加載.
?? ??? ?*/
?? ??? ???? Ext.define('Gird', { ?
?? ??? ??? ??? ?uses : ['Boy'], ?
?? ??? ??? ??? ?getBoy : function(){ ?
?? ??? ??? ??? ??? ?return Ext.create('Boy'); ?
?? ??? ??? ??? ?}, ?
?? ??? ??? ??? ?sleep : function(){ ?
?? ??? ??? ??? ??? ?alert('sleep'); ?
?? ??? ??? ??? ?} ?
?? ??? ??? ?}); ?
???? ?
??? //對于uses屬性,Boy類放在后面是可以的,不會報錯 ?
?? ??? ??? ?Ext.define('Boy', { ?
?? ??? ??? ??? ?play : function(){ ?
?? ??? ??? ??? ??? ??? alert('play'); ?
?? ??? ??? ??? ?} ?
?? ??? ??? ?}); ?
???? ?
???? ?
??? //對于requires屬性,Boy類必須在Grid類之前加載,不然會報錯 ?
?? ??? ??? ?Ext.define('Boy', { ?
?? ??? ??? ??? ?play : function(){ ?
?? ??? ??? ??? ??? ?alert('play'); ?
?? ??? ??? ??? ?} ?
?? ??? ??? ?}); ?
???????????????? ?
?? ??? ??? ?Ext.define('Gird', { ?
?? ??? ??? ??? ?requires : ['Boy'], ?
?? ??? ??? ??? ?getBoy : function(){ ?
?? ??? ??? ??? ??? ?return Ext.create('Boy'); ?
?? ??? ??? ??? ?}, ?
?? ??? ??? ??? ?sleep : function(){ ?
?? ??? ??? ??? ??? ?alert('sleep'); ?
?? ??? ??? ??? ?} ?
?? ??? ??? ?});?
????????<!--*********************************************-->
?? ??? ?
?? ??? ?<!--Cofig的使用，主要是簡化構(gòu)造器中的參數(shù)-->
?? ??? ?/*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);//除了這個，什么都不能加進(jìn)來
?? ??? ??? ?
?? ??? ?},
?? ??? ??? ?
?? ??? ?eat:function(){
?? ??? ??? Ext.Msg.alert('I\'m hungry,I want to eat');
?? ??? ??? ?}?? ??? ?
?? ??? ?})
?? ??? ?
?? ??? ?var aaron = Ext.create('Father', {
?? ??? ??? ?name:'huahua',
?? ??? ??? ?age:19
?? ??? ??? ?});
?? ??? ?alert(aaron.getName());*/
?? ??? ?
?? ??? ?
?? ?<!--*********************************************-->

????好了，這一節(jié)就到這吧，小海我也累了，明天繼續(xù)把學(xué)到的東西與大家一起分享

轉(zhuǎn)載于:https://blog.51cto.com/9197823/1641333

總結(jié)

以上是生活随笔為你收集整理的ext 浅谈类的实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。