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. 动态类加载


view source
print ?
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 });
ExtJS 4.*基础概念总结(基于Ext4.2.1)_第1张图片
view source
print ?
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>
ExtJS 4.*基础概念总结(基于Ext4.2.1)_第2张图片
view source
print ?
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>
ExtJS 4.*基础概念总结(基于Ext4.2.1)_第3张图片
view source
print ?
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
ExtJS 4.*基础概念总结(基于Ext4.2.1)_第4张图片
view source
print ?
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>
ExtJS 4.*基础概念总结(基于Ext4.2.1)_第5张图片


ExtJS 4.*基础概念总结(基于Ext4.2.1)_第6张图片


view source
print ?
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 });


view source
print ?
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 ]

ExtJS 4.*基础概念总结(基于Ext4.2.1)_第7张图片
view source
print ?
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();
ExtJS 4.*基础概念总结(基于Ext4.2.1)_第8张图片

ExtJS 4.*基础概念总结(基于Ext4.2.1)_第9张图片
ExtJS 4.*基础概念总结(基于Ext4.2.1)_第10张图片



你可能感兴趣的:(ExtJS 4.*基础概念总结(基于Ext4.2.1))