ExtJS 4.*基础概念总结(基于Ext4.2.1)

最新推荐文章于 2021-02-13 19:32:50 发布

转载最新推荐文章于 2021-02-13 19:32:50 发布 · 801 阅读

本文详细介绍了ExtJS 4框架的核心概念与使用技巧，包括Ext.application的配置、Ext.onReady的使用场景、Ext.define的定义方法、Ext.data.Model的验证规则等关键知识点。

研究了一下ExtJS-4，发现这个框架很强大，总结一下，和大家分享分享，理解不到位的地方大家多多指正

1. Ext.application

2. Ext.onReady()

3. Ext.define()

4. Ext.data.proxy.Proxy

5. Ext的组合属性-mixins

6. Ext.create()

7. Ext.ComponentQuery、refs:

8. Init: function(){}

9. Ext.Class.alias

10. Ext.AbstractComponent -> xtype

11. this.callParent(arguments)

12. Ext.data.Model.validations: 合法性验证

13. 动态类加载

01
//指定Ext
 Framework 类加载路径

02
Ext.Loader.setConfig({enabled:true,
 paths:{Hongbo:"app"}});

03
 
04
Ext.application(

05
{

06
    //定义一个全局命名空间
 Hongbo

07
    name: 'Hongbo',

08
 
09
//自动创建一个
 Hongbo.view.Viewport 实例目标直接对应app/view/目录下的//Viewport.js

10
    autoCreateViewport: true,

11
 
12
    controllers:

13
    [

14
        'frame.C_Frame'//#C_Frame#2013/07/01
 指定控制器

15
    ]

16
});

01
<script
 type="text/javascript">

02
    var fn
 = function()

03
    {

04
        alert("此用户的名字是：" + this.name);

05
    }

06
    var user
 = {

07
        name
 : "屌缌周"

08
    }

09
    Ext.onReady(fn
 , user);

10
</script>

01
<script
 type="text/javascript">

02
    Ext.define("Hongbo.Person" ,

03
            //
 该对象用于为Hongbo.Person类指定属性

04
            {

05
                name:"匿名",

06
                age:0,

07
                walk:function()

08
                {

09
                    alert(this.name
 + "正在慢慢地走...");

10
                }

11
            }, function() //
 指定类创建成功的回调函数

12
            {

13
                alert("Hongbo.Person类创建成功！");

14
                //
 该回调函数中的this代表了Hongbo.Person类本身

15
                alert(this.self
 == Hongbo.Person.Class);

16
            });

17
    var p
 = new Hongbo.Person();

18
    p.walk();

19
</script>

01
Ext.define("MyClass.A",
 {

02
     showA: function(){

03
          console.log("A");

04
     }

05
});

06
Ext.define("MyClass.B",
 {

07
     showB: function(){

08
          console.log("B");

09
     }

10
});

11
Ext.define("MyClass.C",
 {

12
     mixins:
 {

13
          classA: "MyClass.A",

14
          classB: "MyClass.B"

15
     },

16
     showC: function(){

17
          console.log("C");

18
     }

19
});

20
var objC
 = Ext.create("MyClass.C");

21
objC.showA(); //
 控制台结果：A

22
objC.showB(); //
 控制台结果：B

23
objC.showC(); //
 控制台结果：C

01
<script
 type="text/javascript">

02
Ext.define("Hongbo.User",

03
    {

04
        //
 定义静态成员，这些静态成员可以被子类继承

05
        config:
 {

06
            name:"fkjava",

07
            password:"8888"

08
        },

09
        //
 定义构造器，直接接受config指定的选项

10
        constructor: function(cfg)

11
        {

12
            this.initConfig(cfg);

13
        }

14
    });

15
//
 创建一个Hongbo.User对象

16
var user
 = Ext.create("Hongbo.User",

17
    {

18
        name: "屌缌周",

19
        password: "1234"

20
    });

21
alert(user.name
 + "-->" +
 user.password);

22
</script>

01
Ext.define('MyApp.CoolPanel',
 {

02
    extend: 'Ext.panel.Panel',

03
    alias:
 ['widget.coolpanel'],

04
    title: 'Yeah!'

05
});

06
 
07
//
 Using Ext.create

08
Ext.create('widget.coolpanel');

09
 
10
//
 Using the shorthand for defining widgets by xtype

11
Ext.widget('panel',
 {

12
    items:
 [

13
        {xtype: 'coolpanel',
 html: 'Foo'},

14
        {xtype: 'coolpanel',
 html: 'Bar'}

15
    ]

16
});

01
items:
 [

02
     Ext.create('Ext.form.field.Text',

03
     {

04
         fieldLabel: 'Foo'

05
     }),

06
     Ext.create('Ext.form.field.Text',

07
    {

08
         fieldLabel: 'Bar'

09
     }),

10
     Ext.create('Ext.form.field.Number',

11
     {

12
         fieldLabel: 'Num'

13
     })

14
 ]

15
上面的创建方式改用：xtype

16
 
17
 items:
 [

18
     {

19
         xtype: 'textfield',

20
         fieldLabel: 'Foo'

21
     },

22
     {

23
         xtype: 'textfield',

24
         fieldLabel: 'Bar'

25
     },

26
     {

27
         xtype: 'numberfield',

28
         fieldLabel: 'Num'

29
     }

30
 ]

01
Ext.define("Patient",

02
{

03
    extend: "Ext.data.Model",

04
    fields:

05
    [

06
        {name:'id'},

07
        {name:'dwdm'},    //单位代码

08
        {name:'dwccm'},  //单位层次码

09
        {name:'dwqc'}

10
    ],

11
    validations:

12
    [

13
        {

14
            field: "age",

15
            type: "presence"

16
        },

17
        {

18
            field: "name",

19
            type: "presence"

20
        },

21
        {

22
            field: "name",

23
            type: "length",
 min: 2, max: 60

24
        },

25
        {

26
            field: "name",

27
            type: "format",
 matcher: /([a-z ]+)/

28
        },

29
        {

30
            field: "gender",

31
            type: "inclusion",
 list: ['M', 'F']

32
        },

33
        {

34
            field: "weight",

35
            type: "exclusion",
 list: [0]

36
        },

37
        {

38
            field: "email",

39
            type: "email"

40
        }

41
    ]

42
});

43
    var p
 = Ext.create("Patient",

44
    {

45
        name: "L",

46
        phone: "9876-5432",

47
        gender: "Unknown",

48
        birthday: "95/26/1986"

49
    });

50
 
51
    var errors
 = p.validate();

52
    errors.isValid();