Ext.js入门（二）

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中的做法      其中　　　 Ext.OA.helloworld = Ext.emptyFn;　　等价于　　　　 Ext.OA.helloworld = function(){};

3.支持类实例属性

3：支持类实例方法

4：支持类静态方法

}

5：支持构造方法

}

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.OA.Student = function(_cfg) { 　　　　　　　　　　　 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(){…}})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。