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

//指定Ext Framework 类加载路径Ext.Loader.setConfig({enabled:true, paths:{Hongbo:"app"}});Ext.application({    //定义一个全局命名空间 Hongbo    name: 'Hongbo',//自动创建一个 Hongbo.view.Viewport 实例目标直接对应app/view/目录下的//Viewport.js    autoCreateViewport: true,    controllers:    [        'frame.C_Frame'//#C_Frame#2013/07/01 指定控制器    ]});

<script type="text/javascript">var fn = function(){alert("此用户的名字是：" + this.name);}var user = {name : "屌缌周"}Ext.onReady(fn , user);</script>

<script type="text/javascript">    Ext.define("Hongbo.Person" ,            // 该对象用于为Hongbo.Person类指定属性            {                name:"匿名",                age:0,                walk:function()                {                    alert(this.name + "正在慢慢地走...");                }            }, function() // 指定类创建成功的回调函数            {                alert("Hongbo.Person类创建成功！");                // 该回调函数中的this代表了Hongbo.Person类本身                alert(this.self == Hongbo.Person.Class);            });    var p = new Hongbo.Person();    p.walk();</script>

Ext.define("MyClass.A", {     showA: function(){          console.log("A");     }});Ext.define("MyClass.B", {     showB: function(){          console.log("B");     }});Ext.define("MyClass.C", {     mixins: {          classA: "MyClass.A",          classB: "MyClass.B"     },     showC: function(){          console.log("C");     }});var objC = Ext.create("MyClass.C");objC.showA(); // 控制台结果：AobjC.showB(); // 控制台结果：BobjC.showC(); // 控制台结果：C

<script type="text/javascript">Ext.define("Hongbo.User",{// 定义静态成员，这些静态成员可以被子类继承config: {name:"fkjava",password:"8888"},// 定义构造器，直接接受config指定的选项constructor: function(cfg) {this.initConfig(cfg);}});// 创建一个Hongbo.User对象var user = Ext.create("Hongbo.User",{name: "屌缌周",password: "1234"});alert(user.name + "-->" + user.password);</script>

Ext.define('MyApp.CoolPanel', {    extend: 'Ext.panel.Panel',    alias: ['widget.coolpanel'],    title: 'Yeah!'});// Using Ext.createExt.create('widget.coolpanel');// Using the shorthand for defining widgets by xtypeExt.widget('panel', {    items: [        {xtype: 'coolpanel', html: 'Foo'},        {xtype: 'coolpanel', html: 'Bar'}    ]});

items: [     Ext.create('Ext.form.field.Text',     {         fieldLabel: 'Foo'     }),     Ext.create('Ext.form.field.Text',     {         fieldLabel: 'Bar'     }),     Ext.create('Ext.form.field.Number',     {         fieldLabel: 'Num'     }) ]上面的创建方式改用：xtype items: [     {         xtype: 'textfield',         fieldLabel: 'Foo'     },     {         xtype: 'textfield',         fieldLabel: 'Bar'     },     {         xtype: 'numberfield',         fieldLabel: 'Num'     } ]

Ext.define("Patient", {    extend: "Ext.data.Model",    fields:     [         {name:'id'},        {name:'dwdm'},    //单位代码        {name:'dwccm'},  //单位层次码        {name:'dwqc'}    ],    validations:     [        {            field: "age",             type: "presence"        },         {            field: "name",             type: "presence"        },         {            field: "name",             type: "length", min: 2, max: 60        },         {            field: "name",             type: "format", matcher: /([a-z ]+)/        },         {            field: "gender",             type: "inclusion", list: ['M', 'F']        },         {            field: "weight",             type: "exclusion", list: [0]        },        {            field: "email",             type: "email"        }    ]});    var p = Ext.create("Patient",     {        name: "L",        phone: "9876-5432",        gender: "Unknown",        birthday: "95/26/1986"    });    var errors = p.validate();    errors.isValid();