ExtJs4 笔记（2） ExtJs对js基本语法扩展支持

《回到系列目录

本篇主要介绍一下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/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。 分类: JS 好文要顶 关注我 收藏该文   lipan
关注 - 4
粉丝 - 562 +加关注 6 0 (请您对文章做出评价) « 上一篇：ExtJs4 笔记（1） ExtJs大比拼JQuery：Dom文档操作
» 下一篇：ExtJs4 笔记（3） Ext.Ajax 对ajax的支持
posted @ 2011-12-08 00:26 lipan 阅读(13894) 评论(11) 编辑 收藏 评论列表 #1楼 2011-12-08 09:10 zesion  不错。LZ整理的相当好。 支持(1)反对(0) #2楼 2011-12-08 09:22 小渺  很好，受益匪浅。 支持(1)反对(0) #3楼 2011-12-08 10:22 天空布蓝  谢谢ls 非常不错的说。。 支持(1)反对(0) #4楼[楼主] 2011-12-09 09:17 lipan  @天空布蓝
@小渺
@zesion
谢谢关注 支持(1)反对(1) #5楼 2011-12-12 09:22 cr2121  谢谢，希望持续更新，很有帮助 支持(1)反对(0) #6楼 2011-12-21 21:07 廖飞  错误: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Huake.test.Person

Huake.test.Student 继承 Huake.test.Person 楼主，

var student = Ext.create('Huake.OO.Student');报上面的错
请问这个怎么解决？谢谢 支持(1)反对(0) #7楼[楼主] 2011-12-21 23:33 lipan  @廖飞
大哥，你用的是extjs4.0以上的版本吗？ 支持(1)反对(0) #8楼 2011-12-22 09:59 廖飞  @lipan
是的，最新的。4.0.7 支持(1)反对(0) #9楼 2011-12-22 10:00 廖飞  引用 lipan：
@廖飞
大哥，你用的是extjs4.0以上的版本吗？

是的，最新的。4.0.7 支持(1)反对(0) #10楼 2013-05-31 13:43 ____卡托丶  楼主有个问题 怎么在 gridpannel 中默认选中columns 中的复选框 支持(1)反对(0) #11楼 2014-04-07 21:35 岑逸  详细！多谢楼主~！

总结

以上是生活随笔为你收集整理的ExtJs4 笔记（2） ExtJs对js基本语法扩展支持的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。