[转载]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) { }}); |
