ExtJS之面向对象编程

1：支持命名空间 

 

 <script type="text/javascript">
        // 定义一个命名空间
        Ext.namespace("Ext.wentao");
        // 在命名空间上定义一个类
        Ext.wentao.helloworld = Ext.emptyFn;
        // 创建一个类的实例
        new Ext.wentao.helloworld();   
    </script>

 其中

 

Ext.wentao.helloworld = Ext.emptyFn;

 

 

等价于  

Ext.wentao.helloworld = function(){};

 

2：支持类实例属性 

    <script type="text/javascript">
        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类 
        // 为自定义的类 增加一个 name 属性，并赋值
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛"
        });

        var _person = new Ext.wentao.Person();// 实例化 自定义类
        alert(_person.name);
        _person.name = "张三";// 修改类name属性
        alert(_person.name);

    </script>

 

 
3：支持类实例方法  

    <script type="text/javascript">
        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类 
        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛",
            sex : "男",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });

        var _person = new Ext.wentao.Person();// 实例化 自定义类
        _person.print();

    </script>

 

4：支持类静态方法  

<script type="text/javascript">

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛",
            sex : "男",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });

        // 演示 类静态方法
        Ext.wentao.Person.print = function(_name, _sex) {
            var _person = new Ext.wentao.Person();
            _person.name = _name;
            _person.sex = _sex;
            _person.print(); // 此处调用类 实例方法，上面print是类 静态方法
        };

        Ext.wentao.Person.print("张三", "女"); // 调用类 静态方法

    </script>

 

5：支持构造方法  

<script type="text/javascript">
        Ext.namespace("Ext.wentao"); //自定义一个命名空间

    //构造方法
        Ext.wentao.Person = function(_cfg){
            Ext.apply(this,_cfg);
        };

    //演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            print:function(){
                alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
            }
        });
    
    //演示 类静态方法
        Ext.wentao.Person.print = function(_name,_sex){
            var _person = new Ext.wentao.Person({name:_name,sex:_sex});
            _person.print(); //此处调用类 实例方法，上面print是类 静态方法
        };

    Ext.wentao.Person.print("张三","女"); //调用类 静态方法
    </script>

 

6：支持类继承  

 

<script type="text/javascript">

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

// *******************父类*********************
        // 构造方法
        Ext.wentao.Person = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            job : "无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                    this.sex, this.job));
            }
        });    

// *******************子类1*********************
        Ext.wentao.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        Ext.extend(Ext.wentao.Student, Ext.wentao.Person, {
            job : "学生"
        });

        var _student = new Ext.wentao.Student({
            name : "张三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

</script>

7：支持类实例方法重写  

    <script type="text/javascript">    
        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

// *******************父类*********************
        // 构造方法
        Ext.wentao.Person = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            job : "无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                    this.sex, this.job));
                }
        });

// *******************子类1*********************
        Ext.wentao.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 重写父类的 实例 方法
        Ext.extend(Ext.wentao.Student, Ext.wentao.Person, {
            job : "学生",
            print : function() {
                alert(String.format("{0}是一位{1}{2}", this.name, this.sex,
                    this.job));
            }
        });

        var _student = new Ext.wentao.Student({
            name : "张三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

    </script>

 

8：支持命名空间别名  

    <script type="text/javascript">

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

        Wt = Ext.wentao; // 命名空间的别名

// *******************父类*********************
        // 构造方法
        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.wentao.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(); // 调用 父类方法


    </script>

 

9：支持类别名 

<script type="text/javascript">

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

        Wt = Ext.wentao; // 命名空间的别名

// *******************父类*********************
        // 构造方法
        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(); // 调用 父类方法

    </script>