ExrJS4学习笔记1 类
ExtJS4创建类的方式
在Extjs4中,你只需要使用一个方法就可以解决这些问题:Ext.define.以下是它的基本语法: 1: Ext.define(className, members, onClassCreated);
className: 类名
members:代表类成员的对象字面量(键值对,json)
onClassCreated: 可选的回调凼数,在所有依赖都加载完毕,幵且类本身建立后觌发.由亍类创建的新的异步特性,这个回调凼数在很多情况下都很有用.这些在第四节中将迚一步讨论
例如:
Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function (name) {
if (name) {
this.name = name;
}
return this;
},
eat: function (foodType){
alert(this.name + " is eating " + foodType);
return this;
}
});
var li = Ext.create('My.sample.Person', 'LiLei');
li.eat('面包');
程序执行结果会弹出alert窗口显示"LiLei is eating 面包".
注意：我们使用Ext.create()方法创建了My.sample.Person类的一个新实例.我们也可以使用新的关键字(new My.sample.Person())来创建.然而,建议养成始终用Ext.create来创建类示例的习惯,因为它允许你利用动态加载的优势.更多关于动态加载信息,请看入门指南:入门指南
-----------------------------------------------------------------------------------------
2.配置
在ExtJS 4 ,我们引入了一个专门的配置属性,用于提供在类创建前的预处理功能.特性包括:
- 配置完全封装其他类成员
- getter和setter.如果类没有定义这些方法,在创建类时将自动生成配置的属性的getter和setter方法。
- 同样的,每个配置的属性自动生成一个apply方法.自动生成的setter方法内部在设置值之前调用apply方法.如果你要在设置值之前自定义自己的逻辑,那就重载apply方法.如果apply没有返回值,则setter不会设置值.看下面applyTitle的例子:
示例代码
Ext.define('My.own.Window', {
isWindow: true,
config: {
title: 'Title Here',
bootomBar: {
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('Error:Title Muset 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()); //Hello World
myWindow.setTitle('Someting New');
alert(myWindow.getTitle()); //Something New
myWindow.setTitle(null); //alter "Error: Title must be a valid non-empty string"
myWindow.setBootomBar({ height: 100 }); //高度就会被设置成 100了,但是这里的Bottom为啥b大写了呢？
3.Static
静态成员可以使用statics配置项来定义
Ext.define('Computer', {
statics: {
instanceCount: 0,
factory: function (brand) { //品牌，商标
//this 在这里引用类本身
return new this({ brand: brand });
}
},
config: {
brand: null
},
constructor: function (config) {
this.initConfig(config);//初始化 配置
//直接掉用当前类的静态方法
this.self.instanceCount++;
return this;
}
});
var dellComputer = Computer.factory('Dell');
var aappleCompute = Computer.factory('Mac');
//使用自动生成的getter的配置属性的值。alert“Mac”
alert(aappleCompute.getBrand());
alert(Computer.instanceCount);//alert "2"
ExtJs4 TreeNode设置节点的值：node.set('text', 'newValue')