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(); // 控制台结果：A
objC.showB(); // 控制台结果：B
objC.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.create
Ext.create('widget.coolpanel');

// Using the shorthand for defining widgets by xtype
Ext.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();