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

 

研究了一下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();

转自：http://www.open-open.com/home/space.php?uid=135360&do=blog&id=11658