大家都知道該框架是完全面向物件的，當學習一門新技術時肯定要先了解基礎的編碼風格和基礎語法，現將ext.js的面向物件特性整理如下

<script type="text/javascript">
        //宣告名稱空間
        Ext.namespace("Qx.Ext");
        //定義類(預設建構函式)
        Qx.Ext.Panda = function () {
            //定義類事件
            this.addEvents("BeforeSay",
                "AfterEat");
        }; // Ext.emptyFn;
        //定義類(帶引數建構函式)
        //Qx.Ext.Panda = function(obj) {
        //    Ext.apply(this, obj);
        //};

        //定義類成員
        //Ext.apply
        Ext.extend
            (
            //Qx.Ext.Panda.prototype
            Qx.Ext.Panda,
            Ext.util.Observable//繼承事件工具類
            , {
            //成員變數
            nickName: "四川大熊貓",
            sex: "男",
            //成員方法
            Say: function () {
                //觸發前置事件
                this.fireEvent("BeforeSay", this, this.nickName);
                log("我的名字是" + this.nickName + "[" + this.sex + "]");
            },
            //成員方法(帶引數)
            Eat: function(food) {
                log(String.format("{0}正在吃{1}",this.nickName, food));
                //觸發後置事件
                this.fireEvent("AfterEat", this, this.nickName, food);

            }
        });

        //定義類靜態方法（帶引數）
        Qx.Ext.Panda.GetType = function(note) {
            log(note + "Qx.Ext.Panda");
        }
</script>
<script type="text/javascript">
        Ext.namespace("Qx.Ext.Zoo");
        //設定命名空間別名（全域性有效）
        var _Zoo = Qx.Ext.Zoo;
        //用別名定義類
        _Zoo.BigPanda = function () { };
        //設定類別名（全域性有效）
        var BIG_PANDA = _Zoo.BigPanda;
        //類繼承
        Ext.extend(BIG_PANDA,
           Qx.Ext.Panda, {
            Run:function() {
                log(this.nickName+"正在飛快的奔跑");
            },
               //重寫父類方法
            Eat: function (food) {
                log(String.format("大熊貓正在吃{0}",  food));

            }
        });
</script>
<script type="text/javascript">
                //例項化類Panda
                var panda = new Qx.Ext.Panda();
                //var panda = new Qx.Ext.Panda({ nickName: '熊姐姐', sex: '女' });
                //呼叫成員變數
                log(panda.nickName, "panda.nickName");
                //設定事件處理
                panda.on("AfterEat",function(obj,name,food) {
                    log(String.format("廣播：{0}吃了10kg{1}", name, food));
                });
                panda.on("BeforeSay", function (obj, name) {
                    log(String.format("廣播：{0}喝了一大瓶水，然後準備說話", name));
                    });
                //呼叫成員函式
                panda.Say();
                panda.Eat("竹子");

                //呼叫類靜態方法（帶引數）
                Qx.Ext.Panda.GetType("[Type]");

                //呼叫子類
                var bigPanda = new Qx.Ext.Zoo.BigPanda();
                bigPanda.Run();
                //呼叫子類被重寫的方法
                bigPanda.Eat("大竹子");
</script>
 

執行效果如下