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的值。
?