Extjs学习--面向对象设计

最新推荐文章于 2024-06-16 18:09:06 发布

aptl84294

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hxworm/articles/2580531.html

版权

不废话直接上源代码。

HelloWorld.js

>>>>>>>>>>>>>>>>>>BEGIN

//命名空间
Ext.namespace("Ext.hxworm");

Ext.hxworm.HelloWorld = Ext.emptyFn;

Ext.hxworm.Person = Ext.emptyFn;

//静态方法
Ext.hxworm.Person.print = function(_name,_sex){
    var _person = new Ext.hxworm.Person();
    _person.name = _name;
    _person.sex = _sex;
    _person.print();
}

//对象/属性/方法
Ext.apply(Ext.hxworm.Person.prototype,{
    name:"HxWorM",
    sex:"male",
    print:function(){
        alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
    }
});

//-----------------------------------------------------
//构造方法(可以重载)
Ext.hxworm.Person2 = function(_cfg){
    Ext.apply(this,_cfg);
}

Ext.hxworm.Person2.say = function(_name,_sex){
    var _person = new Ext.hxworm.Person2({name:_name,sex:_sex});//通过构造方法实例化对象
    _person.print();
}

Ext.apply(Ext.hxworm.Person2.prototype,{
    print:function(){
        alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
    }
});

//-------------------------------------------------------
//继承
Ext.hxworm.Person3 = function(_cfg){
    Ext.apply(this,_cfg);
}

Ext.apply(Ext.hxworm.Person3.prototype,{
    job:"无",
    print:function(){
        alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
    }
});

Ext.hxworm.Student = function(_cfg){
    Ext.apply(this,_cfg);
}

//继承
Ext.extend(Ext.hxworm.Student,Ext.hxworm.Person3,{
    job:"学生"//属性重写
});

//继承后类实例方法重写
Ext.hxworm.Teacher = function(_cfg){
    Ext.apply(this,_cfg);
}

Ext.extend(Ext.hxworm.Teacher,Ext.hxworm.Person3,{
    job:"老师",//属性重写
    print:function(){
        alert(String.format("{0}是一名{1}{2}。",this.name,this.sex,this.job));
    }
});

//-----------------------------
//命名空间的别称
Hx = Ext.hxworm;

//类的别名
PN = Ext.hxworm.Person;

//-----------------------------
//事件
Ext.hxworm.Person4 = function(){
    
    this.addEvents(
        "namechange",
        "sexchange"
    );
}

Ext.extend(Ext.hxworm.Person4,Ext.util.Observable,{
    name:"",
    sex:"",
    setName:function(_name){
        if(this.name != _name){
            //发布事件
            this.fireEvent("namechange",this,this.name,_name);
            this.name = _name;
        }
    },
    setSex:function(_sex){
        if(this.sex != _sex){
            this.fireEvent("sexchange",this,this.sex,_sex);
            this.sex = _sex;
        }
    }
});

>>>>>>>>>>>>>>>>>>END

HelloWorld.html

>>>>>>>>>>>>>>>>>>BEGIN

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>命名空间</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css" />
<!-- ** Javascript ** -->
<script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
<script type="text/javascript" src="HelloWorld.js"></script>
<script type="text/javascript">
    new Ext.hxworm.HelloWorld();
    
    var _person = new Ext.hxworm.Person();//实例化对象
    
    alert(_person.name);//得到属性的值
    
    _person.name = "Blake";//设置属性的值
    
    alert(_person.name);
    
    _person.print();//调用实例方法
    
    Ext.hxworm.Person.print("Blake","Female");//调用静态方法
    
    Ext.hxworm.Person.print("hxworm","MALE");//调用静态方法
    
    Ext.hxworm.Person2.say("HXWORM","MALE");//调用构造方法
    
    var _teacher = new Ext.hxworm.Teacher({name:"HxWorM",sex:"Male"});//继承后
    
    _teacher.print();
    
    var _student = new Ext.hxworm.Student({
        name: "Blake",
        sex: "Female"
    });
    
    _student.print();
    
    //--------------------------
    //事件
    
    var _person4 = null;
    
    button_click = function(){
        _person4.setName(prompt("请输入姓名:",""));
        _person4.setSex(prompt("请输入性别:",""));
    }
    
    Ext.onReady(function(){
        var txt_name = Ext.get("txt_name");
        var txt_sex = Ext.get("txt_sex");
        _person4 = new Ext.hxworm.Person4();
        //订阅事件
        _person4.on("namechange",function(_person4,_old,_new){
            txt_name.dom.value = _new;
        });
        _person4.on("sexchange",function(_person4,_old,_new){
            txt_sex.dom.value = _new;
        });
        _person4.on("namechange",function(_person4,_old,_new){
            document.title = _new;
        });
    });
</script>
</head>
<body>
<!-- 事件 -->
姓名:<input type="text" id="txt_name" maxlength="10"/><br/>
性别:<input type="text" id="txt_sex" maxlength="10"/><br/>
<input type="button" value="输入" onclick="button_click()"/>
</body>
</html>

>>>>>>>>>>>>>>>>>>END

转载于:https://www.cnblogs.com/hxworm/articles/2580531.html

aptl84294

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs学习--面向对象设计

不废话直接上源代码。HelloWorld.js>>>>>>>>>>>>>>>>>>BEGIN//命名空间Ext.namespace("Ext.hxworm");Ext.hxworm.HelloWorld = Ext.emptyFn;Ext...
复制链接

扫一扫