ExtJS學習筆記：定義extjs類

ExtJS學習筆記：定義extjs類

定義類

Ext.define('Cookbook.Vehicle', {Manufacturer: 'Aston Martin',Model: 'Vanquish',getDetails: function(){alert('I am an ' + this.Manufacturer + ' ' + this.Model);}}, function(){Console.log('Cookbook.Vehicle class defined!');});

第一個參數是類名，第二個參數是一個對象，包含類中定義的屬性和方法，第三個參數是可選的回呼函數，在對象被執行個體化後執行。

定義的類由 Ext.ClassManager轉為Ext.Class的執行個體，在此過程執行一系列前期和後續的步驟。.前期步驟的順序如下:
‰‰ Loader: 載入需要的還沒有被載入過的類
‰‰ Extend: 基於已有類擴充
‰‰ Mixins: 把定義的 Mixins 融合到類中
‰‰ Config: 在配置選項中的屬性將被處理，並建立相應的get/set/apply/reset 方法
‰‰ Statics: 處理靜態屬性和方法

後續步驟的順序如下：

‰‰ Aliases: 定義別名，以便通過xtype即可建立執行個體
‰‰ Singleton: 如果定義為單一對象，此時建立執行個體
‰‰ Legacy: 不太明白，暫時沒用到

也可以通過registerPreProcessZ喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcrrNcmVnaXN0ZXJQb3N0UHJvY2Vzc29yt723qMztvNPX1Lao0uW1xLSmwO2yvdboPC9wPgo8cD7I57n7w7vT0Na4w/e7+cDgo6zErMjPu/nA4MrHRXh0LkJhc2U8L3A+CjxwPjxzdHJvbmc+TWl4aW5zIDwvc3Ryb25nPsrH0rvQqb/J0tSw0bHwtcTA4LXEyvTQ1LrNt723qMjaus+9+LWxx7DA4NbQo6zP4LWx09rSu7j219O8r6OsvPK7r7ao0uWjrLz1ydm0+sLrwb+hozxicj4KPC9wPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">1. 定義相機功能類:Ext.define('HasCamera', {takePhoto: function(){alert('Say Cheese! .... Click!');}});2. 定義智能手機類，要求必須具有相機功能.Ext.define('Cookbook.Smartphone', {mixins: {camera: 'HasCamera'}});3. 在智能手機類可調用相機功能類的方法:Ext.define('Cookbook.Smartphone', {mixins: {camera: 'HasCamera'},useCamera: function(){this.takePhoto();}});
使用組件查詢來訪問組件：

1.通過xtype查詢

var panels = Ext.ComponentQuery.query('panel');

2.通過css樣式級聯的方式，如查詢某個panel中的所有button

var buttons = Ext.ComponentQuery.query('panel button');

3.通過組件的屬性值

var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');

4.基於ID

var usersPanel = Ext.ComponentQuery.query('#usersPanel');

等等。

擴充extjs的組件

1. 定義向外延展群組件的類:

Ext.define('Cookbook.DisplayPanel', {extend: 'Ext.panel.Panel'});

2. 重載 initComponent 方法並調用父類的同名方法:

Ext.define('Cookbook.DisplayPanel', {extend: 'Ext.panel.Panel',initComponent: function(){// call the extended class' initComponent methodthis.callParent(arguments);}});

3. 應用具體配置項:
i

nitComponent: function(){// apply our configuration to the classExt.apply(this, {title: 'Display Panel',html: 'Display some information here!',width: 200,height: 200,renderTo: Ext.getBody()});// call the extended class' initComponent methodthis.callParent(arguments);}

4. 調用:

var displayPanel = Ext.create('Cookbook.DisplayPanel');displayPanel.show();