ExtJs4 筆記（2） ExtJs對js基本文法擴充支援

文章目錄

• 1.動態引用外部Js
• 2.動態載入類
• 1.函數等待執行
• 1.函數按照一定頻率反覆執行
• 1..Ext.KeyMap
• 2.Ext.KeyNav

《回到系列目錄

本篇主要介紹一下ExtJs對JS基本文法的擴充支援，包括動態載入、類的封裝等。

一、動態引用載入

ExtJs有龐大的類型庫，很多類可能在當前的頁面根本不會用到，我們可以引入動態載入的概念來即用即取。這些代碼都要寫在Ext.onReady外面。

1.動態引用外部Js

[Js]

//載入配置可用Ext.Loader.setConfig({ enabled: true });//動態引用“../ux/”目錄下所有Js檔案類，映射到對應命名空間Ext.Loader.setPath('Ext.ux', '../ux/');

2.動態載入類

[Js]

//載入單個類Ext.require('Ext.window.Window');//載入多個Ext.require([    'Ext.grid.*',    'Ext.data.*',    'Ext.util.*',    'Ext.grid.PagingScroller']);//載入所有類，除了“Ext.data.*”之外Ext.exclude('Ext.data.*').require('*'); 

二、對類的封裝

Js本身是物件導向的語言，但是文法層面上對類的支援不夠完善，ExtJs對此作了一系列的封裝，下面看看類的定義、欄位、建構函式、方法、靜態欄位，方法的實現方式，還用類的繼承的用法。

[Js]

Ext.onReady(function () {    Ext.define("My.test.Animal", {        height: 0,        weight: 0    });    Ext.define("My.test.Person", {        //普通子段        name: "",        //屬性        config: {            age: 0,            father: {                name: "",                age: 0            }        },        //構造方法        constructor: function (name, height) {            this.self.count++;            if (name) this.name = name;            if (height) this.height = height;        },        //繼承        extend: "My.test.Animal",        //執行個體方法        Say: function () {            alert("你好，我是：" + this.name + ",我今年" + this.age + "歲,我的身高是：" + this.height　　　　　　　　　　+ "。我的爸爸是：" + this.father.name + "，他" + this.father.age + "歲。");        },        //靜態子段，方法        statics: {            type: "高等動物",            count: 0,            getCount: function () {                return "當前共有" + this.count + "人";            }        }    });    function test() {        var p = Ext.create("My.test.Person", "李四", 178);        p.setAge(21);        p.setFather({            age: 48,            name: "李五"        });        p.Say();        Ext.create("My.test.Person");        alert(My.test.Person.getCount());    }    test();});

三、基礎資料型別 (Elementary Data Type)

ExtJs支援數值型、字串型、日期型、布爾型等基礎資料型別 (Elementary Data Type)，內容比較簡單，下面示範基本的聲明用法，以及類型轉換。

[Js]

    //定義一個日期類型的資料    var date1 = new Date("2011-11-12");    var date = new Date(2011, 11, 12, 12, 1, 12);    //轉化為字串型    alert(date.toLocaleDateString());    //轉化為數值型    alert(Number(date));    //布爾型，假    var myFalse = new Boolean(false);    //真    var myBool = new Boolean(true);    //定義數值    var num = new Number(45.6);    alert(num);

四、函數執行時間控制

主要用兩個方面，1.讓某個函數等待一段時間後自動執行。2.然某個函數按照一定頻率反覆執行。

1.函數等待執行

實現一個功能，頁面載入完畢後，等待3秒後彈出提示。

[Js]

    var func1 = function (name1, name2) {        Ext.Msg.alert("3秒鐘後自動執行", "你好，" + name1 + "、" + name2 + "！");    };    Ext.defer(func1, 3000, this, ["張三", "李四"]);

1.函數按照一定頻率反覆執行

讓div1每隔一秒更新一次顯示目前時間，10秒又自動停止更新：

[Js]

    //周期執行    var i = 0;    var task = {        run: function () {            Ext.fly('div1').update(new Date().toLocaleTimeString());            if (i > 10) Ext.TaskManager.stop(task);            i++;        },        interval: 1000    }    Ext.TaskManager.start(task);

五、鍵盤事件偵聽1..Ext.KeyMap

通過Ext.KeyMap可以建立鍵盤和使用者動作（Actions）之間的映射。下面看看例子，頁面html沿用Ext.Updater部分。

[Js]

        var f = function () {            alert("B被按下");        }        var map = new Ext.KeyMap(Ext.getDoc(), [        {            key: Ext.EventObject.B,            fn: f        }, {            key: "bc",            fn: function () { alert('b,c其中一個被按下'); }        },        {            key: "x",            ctrl: true,            shift: true,            alt: true,            fn: function () { alert('Control + shift +alt+ x按鍵組合被按下.'); },            stopEvent: true        }, {            key: "a",            ctrl: true,            fn: function () { alert('Control+A全選事件被阻止，自訂事件執行！'); },            stopEvent: true        }    ]);

我們看到，在IE中測試，當我們按下ctrl+A鍵時，全選功能被屏蔽，支援了我們自訂的方法。

2.Ext.KeyNav

Ext.KeyNav主要是用來綁定方向鍵的，已支援的鍵：enter, left, right, up, down, tab, esc, pageUp, pageDown, del, home, end,現在通過它來實現滑鼠控制層移動的功能：

[Js]

            var div1 = Ext.get("div1");            var nav = new Ext.KeyNav(Ext.getDoc(), {                "left": function (e) {                    div1.setXY([div1.getX() - 1, div1.getY()]);                },                "right": function (e) {                    div1.setXY([div1.getX() + 1, div1.getY()]);                },                "up": function (e) {                    div1.move("up",1);                },                "down": function (e) {                    div1.moveTo(div1.getX(), div1.getY() + 1);                },                "enter": function (e) {                }            });

作者：李盼（Lipan）
出處：[Lipan] （http://www.cnblogs.com/lipan/）
著作權聲明：本文的著作權歸作者與部落格園共有。轉載時須註明本文的詳細連結，否則作者將保留追究其法律責任。