作者：李盼（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) {
}
}); |