善待自己,珍惜今天,恩泽他人,享受生活

不放弃任何解决困难的机会,人的一生就是解决困难的过程。 当我们走完一生才能说没有问题要解决了。 面对工作、生活上的压力,面对来自家庭、朋友、同事、上司等的困惑。 要排除万难,否则我们就会被万难排除!

博客园 首页 新随笔 联系 订阅 管理

exjts4中,对javascript基本语法进行了扩展,这是由于javascript本身就是面向对象语言,但它对类的支持不够完善,exjts4对很多东西都进行了扩展,以实现对类的支持,下面分几部分介绍下exjts4对javascript基本语法的扩展。

一、类的封装

 
  1. Ext.onReady(function () { 
  2.   
  3.     Ext.define("My.test.Animal", { 
  4.         height: 0, 
  5.         weight: 0 
  6.     }); 
  7.   
  8.     Ext.define("My.test.Person", { 
  9.         //普通子段 
  10.         name: ""
  11.   
  12.         //属性 
  13.         config: { 
  14.             age: 0, 
  15.             father: { 
  16.                 name: ""
  17.                 age: 0 
  18.             } 
  19.         }, 
  20.   
  21.         //构造方法 
  22.         constructor: function (name, height) { 
  23.             this.self.count++; 
  24.             if (name) this.name = name; 
  25.             if (height) this.height = height; 
  26.   
  27.         }, 
  28.   
  29.         //继承 
  30.         extend: "My.test.Animal"
  31.   
  32.         //实例方法 
  33.         Say: function () { 
  34.             alert("你好,我是:" + this.name + ",我今年" + this.age + "岁,我的身高是:" + this.height 
  35.           + "。我的爸爸是:" + this.father.name + ",他" + this.father.age + "岁。"); 
  36.         }, 
  37.   
  38.         //静态子段,方法 
  39.         statics: { 
  40.             type: "高等动物"
  41.             count: 0, 
  42.             getCount: function () { 
  43.                 return "当前共有" + this.count + "人"
  44.             } 
  45.         } 
  46.   
  47.     }); 
  48.   
  49.     function test() { 
  50.         var p = Ext.create("My.test.Person", "李四", 178); 
  51.         p.setAge(21); 
  52.         p.setFather({ 
  53.             age: 48, 
  54.             name: "李五"
  55.         }); 
  56.         p.Say(); 
  57.         Ext.create("My.test.Person"); 
  58.         alert(My.test.Person.getCount()); 
  59.     } 
  60.     test(); 
  61. });

二、动态加载类:

 
  1. Ext.require('Ext.window.Window'); 
  2.   
  3. Ext.require([ 
  4.     'Ext.grid.*'
  5.     'Ext.data.*'
  6.     'Ext.util.*'
  7. ]); 
  8.   
  9. //加载所有类,除了“Ext.data.*”之外 
  10. Ext.exclude('Ext.data.*').require('*');

关于动态加载类,请参考本站另外一些文章:

1、ExtJS 4中动态加载的路径设置

2、在Extjs4应用中使用Ext.Loader

三、函数执行控制

这其中包含等待某一段时间后执行和在某个时间段内重复执行

等待某一段时间后执

 
  1. var func1 = function (name1, name2) { 
  2.     Ext.Msg.alert("5秒钟后自动执行", "你好," + name1 + "、" + name2 + "!"); 
  3. }; 
  4.  
  5. Ext.defer(func1, 5000, this, ["张三", "李四"]);

某个时间段内重复执行

 
  1. var i = 0; 
  2. var task = { 
  3.     run: function () { 
  4.         Ext.fly('div1').update(new Date().toLocaleTimeString()); 
  5.         if (i > 10) Ext.TaskManager.stop(task); 
  6.         i++; 
  7.     }, 
  8.     interval: 1000 
  9. Ext.TaskManager.start(task);

注:让div1每隔一秒更新一次显示当前时间,10秒又自动停止更新

四:键盘事件侦听

这里分Ext.KeyMap与Ext.KeyNav两种情况

1、Ext.KeyMap

 
  1. var f = function () { 
  2.         alert("B被按下"); 
  3.     } 
  4.  
  5.     var map = new Ext.KeyMap(Ext.getDoc(), [ 
  6.     { 
  7.         key: Ext.EventObject.B, 
  8.         fn: f 
  9.     }, { 
  10.         key: "bc"
  11.         fn: function () { alert('b,c其中一个被按下'); } 
  12.     }, 
  13.     { 
  14.         key: "a"
  15.         ctrl: true
  16.         shift: true
  17.         alt: true
  18.         fn: function () { alert('Control + shift +alt+ a组合键被按下.'); }, 
  19.         stopEvent: true
  20.     }, { 
  21.         key: "c"
  22.         ctrl: true
  23.         fn: function () { alert('Control+C全选事件被阻止,自定义事件执行!'); }, 
  24.         stopEvent: true
  25.     } 
  26. ]);

通过Ext.KeyMap可以建立键盘和用户动作(Actions)之间的映射。上面的例子中,

我们看到,在IE中测试,当我们按下ctrl+c键时,粘贴功能被屏蔽,支持了我们自定义的方法。

2、Ext.KeyNav

 
  1. var div1 = Ext.get("div1"); 
  2. var nav = new Ext.KeyNav(Ext.getDoc(), { 
  3.     "left": function (e) { 
  4.         div1.setXY([div1.getX() - 1, div1.getY()]); 
  5.     }, 
  6.     "right": function (e) { 
  7.         div1.setXY([div1.getX() + 1, div1.getY()]); 
  8.     }, 
  9.     "up": function (e) { 
  10.         div1.move("up",1); 
  11.     }, 
  12.     "down": function (e) { 
  13.         div1.moveTo(div1.getX(), div1.getY() + 1); 
  14.     }, 
  15.     "enter": function (e) { 
  16.  
  17.     } 
  18. });
posted on 2012-04-27 17:59  笨笨丁  阅读(295)  评论(0编辑  收藏  举报