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>