ExtJs学习笔记02

最新推荐文章于 2024-07-25 11:26:35 发布

beidou321

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量71

点赞数

文章标签： extjs function html 扩展 ext

本文链接：https://blog.csdn.net/beidou321/article/details/6483494

版权

构造方法

构造方法：就是在初始化一个对象同时执行的方法。

来看ExtJs中怎么实现的：

    //命名空间
Ext.namespace("dojochina");
//构造方法
dojochina.Person = function(cfg){
    Ext.apply(this,cfg);
};
//类静态方法
dojochina.Person.print = function(name,sex){
    var person = new dojochina.Person({name:name,sex:sex});
    person.print();
};
//类实例属性，对象绑定
Ext.apply(dojochina.Person.prototype,{
    print:function(){
        alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
    }
});

和之前的类实例化代码有差别，name和sex属性在 Ext.apply(dojochina.Person.prototype, {}) 过程中并没有被构造，而是通过构造方法的参数 cfg 将这两个属性传进去的，事实上，构造类实例的时候将对象的一组属性作为一个对象传到构造方法中， cfg 参数就是传进来的属性对象。

在HTML中怎么调用哪？因为print方法是类静态方法，所以采用这种方式来调用

这种方式在Ext中经常被用到，因为这种方式更加的灵活，在构建对象的时候动态的设置对象的属性，在对象属性比较的多的情况下简化了构造过程。

类继承

类继承：对于类的一种扩展形式。

构造几个类来模拟继承的场景，分别是父类Person，子类Teacher和Student，把它们分开来写。

Person.js

    //命名空间
Ext.namespace("dojochina");
//构造方法
dojochina.Person = function(cfg){
    Ext.apply(this,cfg);
};
//类实例属性
Ext.apply(dojochina.Person.prototype,{
    role:"无",
    print:function(){
        alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.role));
    }
});

Teacher.js

Student.js

声明继承，在extend()方法中还可以将属性重新设置。extend()方法的参数格式：Ext.extend(子类, 父类, { 属性列表 });

来看一下怎么调用：

<script type="text/javascript" src="Extjs/person.js"></script>
<script type="text/javascript" src="Extjs/teacher.js"></script>
<script type="text/javascript" src="Extjs/student.js"></script>
<script type="text/javascript">
    var teacher = new dojochina.Teacher( {
        name : "北斗",
        sex : "男"
    });
    teacher.print();
    var student = new dojochina.Student( {
        name : "纯属虚构",
        sex : "女"
    });
    student.print();
</script>

类实例方法重写

类实例方法重写：子类在继承父类时对已经存在的方法进行重新定义。

Person.js

Teacher.js

   //命名空间
Ext.namespace("dojochina");
//构造方法
dojochina.Teacher = function(cfg){
    Ext.apply(this,cfg);
};
//类实例属性
Ext.extend(dojochina.Teacher,dojochina.Person,{
    role:"教师",
    print:function(){
        alert(String.format("{0}是一位{1}{2}",this.name,this.sex,this.role));
    }
});

Student.js

   //命名空间
Ext.namespace("dojochina");
//构造方法
dojochina.Student = function(cfg){
    Ext.apply(this,cfg);
};
//类实例属性
Ext.extend(dojochina.Student,dojochina.Person,{
    role:"学生",
    print:function(){
        alert(String.format("{0}是一位{1}{2}",this.name,this.sex,this.role));
    }
});

来看一下调用：

<script type="text/javascript" src="Extjs/person.js"></script>
<script type="text/javascript" src="Extjs/OverWriteTeacher.js"></script>
<script type="text/javascript" src="Extjs/OverWriteStudent.js"></script>
<script type="text/javascript">
     var person = new dojochina.Person({name:"人",sex:"男"});
     person.print();
     var teacher = new dojochina.Teacher({name:"北斗",sex:"男"});
     teacher.print();
     var student = new dojochina.Student({name:"纯属虚构",sex:"女"});
     student.print();
</script>

看下效果：“姓名:人,性别:男,角色:无”，“背篼是一名男老师”和“纯属虚构是一名女学生”。

可见父类是没有变化的，子类重写父类中的属性和方法，只会改变子类中的属性和方法。

命名空间别名和类别名

Ext.namespace("dojochina");

Dc = dojichina; 规则：首字母要大些。

PN = dojochina.Person；规则：所有字母都要大些，来区别于命名空间的别名。