ExtJS 3.3以前支援的宣告方式:
namespace宣告方式:
Ext.namespace('My.cool');
Ext.ns('My.cool'); // ns是namspace的別名
class宣告方式:
var MyWindow = Ext.extend(Object, { ... });My.cool.Window = Ext.extend(Ext.Window, { ... }); // My.cool需先定義好ExtJS 4新增的宣告方式:
namespace宣告方式:
使用新的定義方式Ext.define時,會自動宣告.class宣告方式:
Ext.define(className, members, onClassCreated); class繼承宣告方式:
Ext.define(className, { extend: parentClassName, ...});class Mixins: 混合複數classes.
可以利用class.mixins.xxxx分別指定使用的class內容,或直接呼叫.Ext.define('CanPlayGuitar', { playGuitar: function() { alert("F#...G...D...A"); }});
Ext.define('CanSing', { sing: function() { alert("I'm on the highway to hell...") }});
Ext.define('CoolPerson', { extend: 'Person',
mixins: { canPlayGuitar: 'CanPlayGuitar', canSing: 'CanSing' },
sing: function() { this.mixins.canSing.sing.call(this); this.playGuitar(); }});
var me = new CoolPerson("Jacky");
me.sing(); // alert("I'm on the highway to hell..."); // alert("F#...G...D...A");class靜態變數宣告:
class定義時,statics關鍵字下定義之Varibles/Method皆為靜態變數.Ext.define('Computer', { statics: { instanceCount: 0, factory: function(brand) { // 'this' in static methods refer to the class itself return new this({brand: brand}); } }, config: { brand: null }, constructor: function(config) { this.initConfig(config); // the 'self' property of an instance refers to its class this.self.instanceCount ++; return this; }});var dellComputer = Computer.factory('Dell');ExtJS 4新增的Config設定
ExtJS4在建置Class時,新增一Config屬性,提供封裝一些預設值資料,在Config陣列內定義ConfigItem Array.並在產生class時,如尚未於class定義apply+ConfigItem同名method下,自動產生ConfigItem之處理程式(set/get/apply三種).如需自行客製化時,則自行設計同名function:{set/get/apply}+ConfigName.
Ext.define('My.own.Window', { /** @readonly */ isWindow: true, config: { title: 'Title Here', bottomBar: { enabled: true, height: 50, resizable: false } }, constructor: function(config) { this.initConfig(config); return this; }, applyTitle: function(title) { if (!Ext.isString(title) || title.length === 0) { alert('title沒有定義'); } else { return title; } }, applyBottomBar: function(bottomBar) { if (bottomBar && bottomBar.enabled) { if (!this.bottomBar) { return Ext.create('My.own.WindowBottomBar', bottomBar); } else { this.bottomBar.setConfig(bottomBar); } } }});
var myWindow = Ext.create('My.own.Window', { title: 'Hello World',
bottomBar: {
height: 60
}
});
alert(myWindow.getTitle()); // alerts "Hello World"myWindow.setTitle('測試TITLE');alert(myWindow.getTitle()); // alerts "測試TITLE"myWindow.setTitle(null); // alerts "title沒有定義"myWindow.setBottomBar({ height: 100 }); // height=100
Ext.namespace('My.cool');
Ext.ns('My.cool'); // ns是namspace的別名 class宣告方式:
var MyWindow = Ext.extend(Object, { ... });My.cool.Window = Ext.extend(Ext.Window, { ... }); // My.cool需先定義好ExtJS 4新增的宣告方式:
namespace宣告方式:
使用新的定義方式Ext.define時,會自動宣告.
class宣告方式:
Ext.define(className, members, onClassCreated);Ext.define(className, { extend: parentClassName, ...});class Mixins: 混合複數classes.
可以利用class.mixins.xxxx分別指定使用的class內容,或直接呼叫.
Ext.define('CanPlayGuitar', { playGuitar: function() { alert("F#...G...D...A"); }});Ext.define('CanSing', { sing: function() { alert("I'm on the highway to hell...") }});Ext.define('CoolPerson', { extend: 'Person', mixins: { canPlayGuitar: 'CanPlayGuitar', canSing: 'CanSing' }, sing: function() { this.mixins.canSing.sing.call(this);
this.playGuitar(); }});var me = new CoolPerson("Jacky");me.sing(); // alert("I'm on the highway to hell..."); // alert("F#...G...D...A");
class靜態變數宣告:
class定義時,statics關鍵字下定義之Varibles/Method皆為靜態變數.
Ext.define('Computer', { statics: { instanceCount: 0, factory: function(brand) { // 'this' in static methods refer to the class itself return new this({brand: brand}); } }, config: { brand: null }, constructor: function(config) { this.initConfig(config); // the 'self' property of an instance refers to its class this.self.instanceCount ++; return this; }});var dellComputer = Computer.factory('Dell');ExtJS 4新增的Config設定
ExtJS4在建置Class時,新增一Config屬性,提供封裝一些預設值資料,在Config陣列內定義ConfigItem Array.並在產生class時,如尚未於class定義apply+ConfigItem同名method下,自動產生ConfigItem之處理程式(set/get/apply三種).如需自行客製化時,則自行設計同名function:{set/get/apply}+ConfigName.
Ext.define('My.own.Window', { /** @readonly */ isWindow: true, config: { title: 'Title Here', bottomBar: { enabled: true, height: 50, resizable: false } }, constructor: function(config) { this.initConfig(config); return this; }, applyTitle: function(title) { if (!Ext.isString(title) || title.length === 0) { alert('title沒有定義'); } else { return title; } }, applyBottomBar: function(bottomBar) { if (bottomBar && bottomBar.enabled) { if (!this.bottomBar) { return Ext.create('My.own.WindowBottomBar', bottomBar); } else { this.bottomBar.setConfig(bottomBar); } } }});
var myWindow = Ext.create('My.own.Window', { title: 'Hello World',
bottomBar: {
height: 60
}
});
alert(myWindow.getTitle()); // alerts "Hello World"myWindow.setTitle('測試TITLE');alert(myWindow.getTitle()); // alerts "測試TITLE"myWindow.setTitle(null); // alerts "title沒有定義"myWindow.setBottomBar({ height: 100 }); // height=100
ExtJS4 Class 載入之定義順序:
如圖所示: Class從Define開始,先由Loader負責載入相依Class(Dynamic loading),在繼承定義之Class(Extend關卡),並進行混和動作(Mixins),與執行Class所定義之Config,經過Statics變數定義後,class進入ready狀態.在後續經過alias(別名)/legacy(舊語法支援)後,classs定義完成.
沒有留言:
張貼留言