1 : ExtJs4.1之前的老版本,想要定义一个自己的class 常常需要这么做:
?
Ext.ns('My.cool');//定义namespace
My.cool.Window = Ext.extend(Ext.Window, { ... });//继承Ext.Window, {...}里是自己的对象属性
??? 然而在ExtJs4.1中有了一个新的写法
Ext.define(className, members, onClassCreated);
?例如:
?
??
Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if (name) {
this.name = name;
}
},
eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
}
});
var aaron = Ext.create('My.sample.Person', 'Aaron');
aaron.eat("Salad"); // alert("Aaron is eating: Salad");
?省掉了定义namespace的步骤。
?
?
2:定义静态方法
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 ++;
}
});
? 访问的时候可以直接用Computer.factory();
?
?
3: initConfig(config)
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);
},
applyTitle: function(title) {
if (!Ext.isString(title) || title.length === 0) {
alert('Error: Title must be a valid non-empty string');
}
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
}
});
?? 调用initConfig(config)可以给每个config生成getter和settter方法,并且生成appy方法,apply方法是在setter之前调用的方法,例如上面的applyTitle在setter之前调用,如果返回title才会调用setter 否则不会。
因此我们可以用myWindow.getTitle()来得到title的值。
?
