ExtJs對js基本文法擴充支援

本篇主要介紹一下ExtJs對JS基本文法的擴充支援，包括動态加載、類的封裝等。

一、動态引用加載

ExtJs有龐大的類型庫，很多類可能在目前的頁面根本不會用到，我們可以引入動态加載的概念來即用即取。這些代碼都要寫在Ext.onReady外面。

1.動态引用外部Js

[Js]

1234	`//加載配置可用` `Ext.Loader.setConfig({ enabled:` `true` `});` `//動态引用“../ux/”目錄下所有Js檔案類，映射到對應命名空間` `Ext.Loader.setPath(` `'Ext.ux'` `,` `'../ux/'` `);`

2.動态加載類

[Js]

12345678910111213

//加載單個類

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]

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061

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]

123456789101112131415161718

//定義一個日期類型的資料

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]

12345

var

func1 =

function

(name1, name2) {

Ext.Msg.alert(

"3秒鐘後自動執行"

"你好，"

+ name1 +

"、"

+ name2 +

"！"

);

};

Ext.defer(func1, 3000,

this

, [

"張三"

"李四"

]);

1.函數按照一定頻率反複執行

讓div1每隔一秒更新一次顯示目前時間，10秒又自動停止更新：

[Js]

1234567891011

//周期執行

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]

1234567891011121314151617181920212223242526

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]

123456789101112131415161718

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) {

ExtJs對js基本文法擴充支援