Ext JS 4官方文档之三(2)


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");


注意,我们是用 Ext.create()方法创建了一个My.sample.Person的实例。当然我们也可以使用new 关键字(new My.sample.Person()),然而我们建议您养成总是使用 Ext.create 的习惯,因为它可以利用动态加载功能。更多关于动态加载的信息,请看Ext JS 4入门指南。

2. 配置
在Ext JS 4中,我们引入了一个专用的config属性,它会在类创建前,由强大的预处理器类 Ext.Class 进行处理,具有如下特性:
配置是从其他类成员完全封装的
每个config属性的getter和setter方法会在类原型中自动的生成,如果类里没有定义这些方法的话
同时,也会为每个config属性生成一个apply方法,自动生成的setter方法会在内部设置值之前调用这个apply方法。如果你想要在设置值之前运行自定义逻辑,就可以覆盖这个apply方法。如果apply没有返回值,setter方法将不会设置值。让我们看看下面的applyTitle方法:
下面的例子定义了一个新类:

复制代码 代码如下:


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  }});
alert(myWindow.getTitle()); // alerts "Hello World"
myWindow.setTitle('Something New');
alert(myWindow.getTitle()); // alerts "Something New"
myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"
myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100



3. 静态配置
静态配置成员可以使用statics属性来定义:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wddjfp.html