ExtJs4 笔记

一、动态引用加载

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 +"人";

            }

        }

  

    });

  

    functiontest() {

        varp = 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

//定义一个日期类型的数据

vardate1 = newDate("2011-11-12");

vardate = newDate(2011, 11, 12, 12, 1, 12);

 

//转化为字符串型

alert(date.toLocaleDateString());

 

//转化为数值型

alert(Number(date));

 

//布尔型，假

varmyFalse = newBoolean(false);

//真

varmyBool = newBoolean(true);

 

//定义数值

varnum = newNumber(45.6);

alert(num);

四、函数执行时间控制

主要用两个方面，1.让某个函数等待一段时间后自动执行。2.然某个函数按照一定频率反复执行。

1.函数等待执行

实现一个功能，页面加载完毕后，等待3秒后弹出提示。

[Js]

?

1

2

3

4

5

varfunc1 = 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

//周期执行

vari = 0;

vartask = {

    run:function () {

        Ext.fly('div1').update(newDate().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

    varf = function() {

        alert("B被按下");

    }

 

    varmap = newExt.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

vardiv1 = Ext.get("div1");

varnav = newExt.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/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。