EXT 4.* 基础概念知识

研究了一下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 4.* 基础概念知识
 
EXT 4.* 基础概念知识
//指定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 指定控制器
    ]
});
EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识
<script type="text/javascript">
    var fn = function()
    {
        alert("此用户的名字是:" + this.name);
    }
    var user = {
        name : "屌缌周"
    }
    Ext.onReady(fn , user);
</script>
EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识
<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 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识
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
EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识
<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 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识
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‘}
    ]
});
EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识
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 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识
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();
EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

EXT 4.* 基础概念知识

上一篇:loj 1429(可相交的最小路径覆盖)


下一篇:重温Observer模式--热水器·改