1、extjs本身就有面向对象的特性,本人写的这个例子只是表现了其中一部分。
2、面向对象编程的好处不多说了,本人也比较喜欢这种编程,但不算精,也在学习路上。
3、像extjs里面的config和requires这些属性,本人是非常喜欢,extjs不是建议给太多组件命名id,可在大组件命名id,并给这个大组件配置这两个属性之一,就可以很方面找大组件里面的小组件了。
Ext.onReady(function(){
//Ext.create 实例化一个对象
var wangwu = Ext.create('Person',{
name:'王五' ,
age:30
});
Logger.printf2('prototype',Person.prototype.name)
Logger.printf2('wangwu',wangwu.getName()+' '+wangwu.getAge()+' '+wangwu.say());
var zhangsan = Ext.create('ohba',{
name:'张三',
age:25
});
Logger.printf2('zhangsan',zhangsan.name+' '+zhangsan.sex+' '+zhangsan.age);
var mother = Ext.create('Mother');
Logger.printf2('mother',Mother.isgiveBirth+' '+mother.Sing()+' '+mother.Dance());
var boy = mother.giveBirth()
Logger.printf2('boy',boy.sex);
})
//---------------------定义和配置--------------------------
//在Ext中如何去定义一个类: Ext.define(className , properties , callback)
Ext.define('Person',{
//这里是对于这个类的一些配置信息
//config属性 就是配置当前类的属性内容,并且会加上get和set方法
config:{
name:'person' ,
age: 0
},
//自己定义的方法
say:function(){
return 'say......';
},
//给当前定义的类加一个构造器 ,目的就是为了初始化信息
constructor:function(config){
var me = this ;
me.initConfig(config); // 真正的初始化传递进来的参数
}
/*
在初始化组件模板方法是一个重要的组件的初始化步骤。
它的目的 是要实现Ext.Component提供任何所需的构造逻辑函数每个子类的。
在初始化组件模板被创建的类的方法,
initComponent: function() {
this.callParent();
}*/
});
//---------------------继承和别名--------------------------
Ext.define('Boy',{
//使用Ext的继承
extend:'Person',
//别名
alias: ['male','ohba'],
config:{
sex:'男',
age:20
}
});
//---------------------混入和静态--------------------------
Ext.define("Singer",{
Sing:function(){
return 'sing.....';
}
});
Ext.define("Danceer",{
Dance:function(){
return 'dance.....';
}
});
Ext.define('Mother', {
statics : {
isgiveBirth : true
},
//requires加载需要的类时机是 当前类初始化之前被加载
requires: ['Boy'],
giveBirth: function() {
// 确保boy类是可用的。
return new Boy();
},
mixins: {
sing : 'Singer',
dance : 'Danceer'
}
});
//记录器
Ext.define('Logger', {
singleton: true,
log: function(msg) {
console.log(msg);
},
printf : function(msg){
this.log(Ext.id('','num:')+' '+msg);
},
printf2 : function(val,msg){
this.printf(val+'--'+msg);
},
});
Logger.log('Hello');