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

来源：互联网发布：js indexof 判断编辑：程序博客网时间：2024/06/05 19:37

研究了一下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 类加载路径
02Ext.Loader.setConfig({enabled:true, paths:{Hongbo:"app"}});
03 
04Ext.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    varfn = function()
03    {
04        alert("此用户的名字是："+ this.name);
05    }
06    varuser = {
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    varp = new Hongbo.Person();
18    p.walk();
19</script>

01Ext.define("MyClass.A", {
02     showA: function(){
03          console.log("A");
04     }
05});
06Ext.define("MyClass.B", {
07     showB: function(){
08          console.log("B");
09     }
10});
11Ext.define("MyClass.C", {
12     mixins: {
13          classA:"MyClass.A",
14          classB:"MyClass.B"
15     },
16     showC: function(){
17          console.log("C");
18     }
19});
20var objC = Ext.create("MyClass.C");
21objC.showA(); // 控制台结果：A
22objC.showB(); // 控制台结果：B
23objC.showC(); // 控制台结果：C

01<script type="text/javascript">
02Ext.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对象
16var user = Ext.create("Hongbo.User",
17    {
18        name:"屌缌周",
19        password:"1234"
20    });
21alert(user.name + "-->"+ user.password);
22</script>

01Ext.define('MyApp.CoolPanel', {
02    extend: 'Ext.panel.Panel',
03    alias: ['widget.coolpanel'],
04    title: 'Yeah!'
05});
06 
07// Using Ext.create
08Ext.create('widget.coolpanel');
09 
10// Using the shorthand for defining widgets by xtype
11Ext.widget('panel', {
12    items: [
13        {xtype:'coolpanel', html: 'Foo'},
14        {xtype:'coolpanel', html: 'Bar'}
15    ]
16});

01items: [
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 ]

01Ext.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    varp = Ext.create("Patient",
44    {
45        name:"L",
46        phone:"9876-5432",
47        gender:"Unknown",
48        birthday:"95/26/1986"
49    });
50 
51    varerrors = p.validate();
52    errors.isValid();

0 0