本篇主要介紹一下ExtJs對JS基本語法的擴展支持，包括動態加載、類的封裝等。
一、動態引用加載
ExtJs有龐大的類型庫，很多類可能在當前的頁面根本不會用到，我們可以引入動態加載的概念來即用即取。這些代碼都要寫在Ext.onReady外面。
1.動態引用外部Js
[Js]
?
|
1
2
3
4
|
//加載配置可用
Ext.Loader.setConfig({ enabled: true });
//動態引用“../ux/”目錄下所有Js文件類，映射到對應命名空間
Ext.Loader.setPath('Ext.ux', '../ux/');
|
2.動態加載類
[Js]
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//加載單個類
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]
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
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();
});
|
三、基本數據類型
ExtJs支持數值型、字符串型、日期型、布爾型等基本數據類型，內容比較簡單，下面演示基本的聲明用法，以及類型轉換。
[Js]
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//定義一個日期類型的數據
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]
?
|
1
2
3
4
5
|
var func1 = function (name1, name2) {
Ext.Msg.alert("3秒鐘後自動執行", "你好，" + name1 + "、"+ name2 + "！");
};
Ext.defer(func1, 3000, this, ["張三", "李四"]);
|
1.函數按照一定頻率反覆執行
讓div1每隔一秒更新一次顯示當前時間，10秒又自動停止更新：
[Js]
?
|
1
2
3
4
5
6
7
8
9
10
11
|
//週期執行
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]
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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]
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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/）
版權聲明：本文的版權歸作者與博客園共有。轉載時須註明本文的詳細鏈接，否則作者將保留追究其法律責任。
