Ext.js入门（二）

原创

zhangyongshizhi 2022-08-05 22:17:06 博主文章分类：Ext.js ©著作权

©著作权归作者所有：来自51CTO博客作者zhangyongshizhi的原创作品，请联系作者获取转载授权，否则将追究法律责任

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.支持类实例属性

　　　　　 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：支持类实例方法

4：支持类静态方法

}<script type=“text/javascript”>

　　　　　　　 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：支持构造方法　

}<script type="text/javascript">
　　　　　　　 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.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(){…}
})