Ext Js簡單事件處理和對象作用域

對於Ext js程序的簡單創建主要是引入ext-base.js和ext-all.js兩個文件，再加入一些樣式文件，網上對於Ext Js的學習資料也比較多，自己在這也簡單分享一下。
Ext Js事件的簡單處理，一個簡單的示例：
該示例主要是對Number的prototype的簡單測試：

//簡單測試
function testNumber() {
    Number.prototype.add = function () {
        //前兩個參數之和
        //                var num1 = arguments[0];
        //                var num2 = arguments[1];
        //                alert(num1 + num2);

        var sum = 0;
        var str = "";

        //for循環取得所有參數之和
        for (var i = 0; i < arguments.length; i++) {
            str += arguments[i].toString() + "+";
            sum += arguments[i];
        }

        //for...in循環取得所有參數之和
        //                for (var j in arguments) {
        //                    str += j + "+";//注意:j遍歷的是下標
        //                    sum += arguments[j];
        //                }

        str = str.substring(0, str.lastIndexOf('+'));
        alert(str + "的和：" + sum);
    }

    var num = 0;
    num.add(11, 12, 13, 15); //相加求和
}

ExtJS對於事件的管理都是通過Ext.EventMannager對象管理，ExtJS對W3C的Event封裝在Ext.EventObject事件對象，支持事件處理的類或接口為Ext.util.Observable,凡是繼承該類的組件或類都支持對象添加事件的處理和響應功能。
注意：對於對象的獲取，Ext.get是對於Element元素（DOM元素）的獲取;Ext.getCmp是對Component對象的獲取。
注意：對於事件的處理不同（Test為某JS函數）
Ext Js獲取組件對象：Ext.getCmp("btnTest").text;
DOM下對於事件的處理：document.getElementById("aLinkTest").onclick=Test;//DOM下的onclick的處理
ExtJs對於DOM對象的事件處理：Ext.get("aLinkTest").onClick = test();//Extjs的onClick的處理

對於Ext Js的事件處理常用handler\on\listeners的簡單處理：(示例都是使用alert彈出的，Ext Js已經封裝了一層，Ext.Msg.alert('信息提示', '信息內容！'))

Ext.onReady(function () {createWin().show(); });
//測試事件
function createWin() {
    var win = new Ext.Window({
        title: "Window標題", height: 500, width: 300,
        items: [
                new Ext.form.TextField({ id: "txtTest" }),
                { xtype: "textfield", id: "txtUserName", fieldLabel: "用戶名", emptyText: "請輸入名字", readOnly: true },
                { xtype: "button", id: "btnHandler", text: "Handler事件處理",//handler事件處理
                    handler: function () { alert('測試handler事件！'); btnHandler("Test1", "test2"); }
                },
                new Ext.Button({ id: 'btnListener', text: 'Listeners多事件監聽', minWidth: '200',
                    listeners: {//多事件監聽
                        "mouseout": function () { alert('你已離開！') },
                        "click": function () { alert('那點我了！') },
                        "disable": function () { alert('觸發Listeners的disable事件') }
                        //on 屬性，也能實現同樣的功能
                    }
                }),
                new Ext.Button({
                    id: "btnHandlerTwo", text: "處理前兩個按鈕事件測試",
                    handler: function () {//
                        alert("我是自己的id:" + this.id); //獲取自己的id
                        alert("我是自己的文本：" + this.text); //獲取自己的text
                        alert("Window的Title:" + this.ownerCt.title);
                        alert("這是第一個按鈕的文本：" + this.ownerCt.items.itemAt(1).text); //回到父容器items的1個索引的text
                        alert("這是第二個按鈕的文本：" + Ext.getCmp("btnListener").text); //Ext.getCmp通過Id獲取text
                        this.ownerCt.items.itemAt(1).setText("改變第一個文本內容！"); //修改屬性
                        Ext.getCmp("btnListener").disable(); //調用方法
                    }
                })
                ],
        buttons: [
                { text: "保存", id: "btnSave", handler: function () { alert("獲取輸出文本：" + Ext.getCmp("txtTest").getValue()) } },
                { text: "取消", id: "btnCancel", listeners: { "click": function () { alert('你干嘛前取消啊！') } } }
                ]
    });
    return win;
}

function Test() {     alert("Test鏈接！"); }

function btnClick(obj, e) {     alert(obj + ",這是你點我的效果！"); }

function btnHandler(obj, e) {     alert("源：" + obj + ";數：" + e); }

對於作用域的簡單測試：

//作用域測試
var Taa = "我是Window域AA!";
function ScopeTest() {//作用域測試
    var Taa = "我是Taa對象域AA!";
    var Tbb = { aa: "我是Tbb對象AA!", bb: "我是Tbb對象BB!" };
    var Tcc = { aa: "我是Tcc對象AA!", bb: "我是Tcc對象BB!", cc: "我是Tcc對象CC!" }
    var win = new Ext.Window({
        title: "WindowsTitle", width: 200, height: 500,
        items: [
                { xtype: "button", id: "btnXtype", text: "測試作用域1" },
                new Ext.Button({ id: "btnExt", text: "測試作用域2" })
                ]
    });
    win.show();

    Ext.getCmp("btnXtype").on("click", function () { alert(window.Taa); alert(this.aa); }, Tbb)
    Ext.getCmp("btnExt").on("click", function () { alert(this.cc) }, Tcc);
}

代碼都是在測試、在改動，看看這樣修改會有什么效果，那樣修改會有什么效果，把一些常用的多多熟練掌握，在不斷的嘗試中找突破，找完善，找真知。