本篇主要介紹一下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) { }}); |