ExtJs4 笔记（2） ExtJs对js基本语法扩展支持
作者：李盼（Lipan）
出处：[Lipan] （http://www.cnblogs.com/lipan/）
本篇主要介绍一下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) {
}
});
|