Ext.js入门（二）
ExtJs OOP基础
一：ExtJs中的面向对象
1、ExtJs中命名空间的定义
Ext中的命名空间类似于C#中的namespace和java中的包,用来对工程中的类进行更好的管理，命名空间的层次结构用.来划分。
Ext通过namespace()方法来创建命名空间.
语法：Ext.namespace(“命名空间”);
示例：Ext.namespace(“MyOffice.System”);
eg：
// 定义一个命名空间 Ext.namespace("Ext.OA");
// 在命名空间上定义一个类 Ext.OA.helloworld = Ext.emptyFn;
// 创建一个类的实例 new Ext.OA.helloworld();
2.Ext中的做法
<script type="text/javascript">
// 定义一个命名空间 Ext.namespace("Ext.OA");
// 在命名空间上定义一个类 Ext.OA.helloworld = Ext.emptyFn;
// 创建一个类的实例 new Ext.OA.helloworld();
</script>
其中
Ext.OA.helloworld = Ext.emptyFn;
等价于
Ext.OA.helloworld = function(){};
3.支持类实例属性
<script type=“text/javascript”>
Ext.namespace(“Ext.OA”); // 自定义一个命名空间
Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类
// 为自定义的类 增加一个 name 属性，并赋值
Ext.apply(Ext.OA.Person.prototype, {
name : “李四"
});
var _person = new Ext.OA.Person();// 实例化 自定义类
alert(_person.name);
_person.name = "张三";// 修改类name属性
alert(_person.name);
</script>
3：支持类实例方法
Ext.namespace(“Ext.OA”); // 自定义一个命名空间
Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类
// 演示类实例方法
Ext.apply(Ext.OA.Person.prototype, {
name : “李四",
sex : "男",
print : function() {
alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
}
});
var _person = new Ext.OA.Person();// 实例化 自定义类
_person.print();
</script>
4：支持类静态方法
Ext.namespace(“Ext.OA”); // 自定义一个命名空间
Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类
// 演示类实例方法
Ext.apply(Ext.OA.Person.prototype, {
name : “李四",
sex : "男",
print : function() {
alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
}
});
// 演示 类静态方法
Ext.OA.Person.print = function(_name, _sex) {
var _person = new Ext.OA.Person();
_person.name = _name;
_person.sex = _sex;
_person.print(); // 此处调用类 实例方法，上面print是类 静态方法
};
Ext.OA.Person.print("张三", "女"); // 调用类 静态方法
</script>
5：支持构造方法
Ext.namespace("Ext.OA"); //自定义一个命名空间
//构造方法
Ext.OA.Person = function(_cfg){
Ext.apply(this,_cfg);
};
//演示类实例方法
Ext.apply(Ext.OA.Person.prototype, {
print:function(){
alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
}
});
//演示 类静态方法
Ext.OA.Person.print = function(_name,_sex){
var _person = new Ext.OA.Person({name:_name,sex:_sex});
_person.print(); //此处调用类 实例方法，上面print是类 静态方法
};
Ext.OA.Person.print("张三","女"); //调用类 静态方法
</script>
6：支持类继承
Ext.namespace("Ext.OA"); // 自定义一个命名空间
//
*******************父类*********************
//
构造方法
Ext.OA.Person =
function(_cfg) {
Ext.apply(this, _cfg);
};
// 演示类实例方法
Ext.apply(Ext.OA.Person.prototype, {
job :
"无",
print :
function() {
alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
this.sex,
this.job));
}
});
Ext.apply(this, _cfg);
};
Ext.extend(Ext.OA.Student, Ext.OA.Person, {
job : "学生"
});
var _student = new Ext.OA.Student({
name : "张三",
sex : "女"
});
_student.print(); // 调用 父类方法
7：支持命名空间别名
Ext.namespace("Ext.OA"); // 自定义一个命名空间
Wt
= Ext.OA; // 命名空间的别名
//
*******************父类*********************
//
构造方法
Wt.Person =
function(_cfg) {
Ext.apply(this, _cfg);
};
// 演示类实例方法
Ext.apply(Wt.Person.prototype, {
job :
"无",
print :
function() {
alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
this.sex,
this.job));
}
});
// *******************子类1*********************
Wt.Student =
function(_cfg) {
Ext.apply(this, _cfg);
};
// 重写父类的 实例 方法
Ext.extend(Wt.Student, Ext.OA.Person, {
job :
"学生",
print :
function() {
alert(String.format("{0}是一位{1}{2}", this.name,
this.sex,
this.job));
}
});
var _student
= new Wt.Student({
name :
"张q三",
sex :
"女"
});
_student.print(); // 调用 父类方法
8：支持类别名
Ext.namespace("Ext.OA"); // 自定义一个命名空间
Wt
= Ext.OA; // 命名空间的别名
//
*******************父类*********************
//
构造方法
Wt.Person =
function(_cfg) {
Ext.apply(this, _cfg);
};
PN
= Wt.Person; // 类别名
//
演示类实例方法
Ext.apply(PN.prototype, {
job :
"无",
print :
function() {
alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
this.sex,
this.job));
}
});
// *******************子类1*********************
Wt.Student =
function(_cfg) {
Ext.apply(this, _cfg);
};
ST = Wt.Student;
// 重写父类的 实例 方法
Ext.extend(ST, PN,
{
job :
"学生",
print :
function() {
alert(String.format("{0}是一位{1}{2}", this.name,
this.sex,
this.job));
}
});
var _student
= new ST({
name :
"张q三",
sex :
"女"
});
_student.print(); // 调用 父类方法
二：Extjs中的配置选项
在ExtJs中，初使化对象时，会大量使用config配置参数(config通常均为一个json对象
Student = function(name,age){
this.name = name;
this.age= age;
}
//测试
Ext.onReady(function(){
var student = new Student("李四"，18);
var info=string.format("姓名：{0}，性别：{1}"，student.name,student.age)
alert(info);
})；
如json作为参数传递，则改造如下：
Student = function(config){
this.name = config.name;
this.sex = config.sex;
}
//测试
var student = new Student({name:”fwy”,sex:”男”});
alert(“姓名:”+student.name+”,性别:”+student.sex);
Extjs中一种更好的做法：
Student = function(config){
Ext.apply(this,config);
}
//测试
var student = new Student({name:”fwy”,sex:”男”});
alert(“姓名:”+student.name+”,性别:”+student.sex);
Ext.apply(obj,config)与Ext.applyIf(obj,config)的区别
说明：apply会将config和obj参数的同名属性覆盖,并且将config的其他属性添加到obj中.而applyIf则不会覆盖。
三：Ext中自定义事件
Ext的各种事件登记方式
1、使用addListener/on方法登记
这是最常见的方法登记方式，可以在元素获取后或组件实例化后登记，也可以在类构造器中登记。
//第一种方式形如：
{ //如msgBox中
…
fn:function(){…},
scope:…
}
//第二种方式
2、多事件组合方式登记
//常见于面板为基类(panel)的组件事件注册
{
…
listners:{
‘collapse’:function(obj){
…
},
‘expand’:function(obj){
…
}
}
}
常用于工具栏按钮的事件注册
{
handler:function(){…},
scope:…
}
//如果在一个元素上添加多个事件处理器可以向以下这样一次性设定
e1.on(
{
‘click’:{fn:this.onClick,scop:this},
‘mouseover’:{fn:this.onMouseOver,scope:this},
‘mouseout’:{fn:this.onMouseOut,scope:this}
}
)
也可以用以下语法
e1.on{
‘click’:this.onClick,
‘mouseover’,this.onMouseOver,
‘mouseout’,this.onMouseOut,
scope:this
}
3、使用Ext.addBehaviors方法登记事件
如下所示
Ext.addBehaviors({
//为id为test的锚点元素添加click事件
‘#test a@click’:function(e,t){...},
//为多个元素增加click事件
‘#test1 a,div.someclass@click’:function(){…}
})
