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基本语法扩展支持的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。