ExtJS 4.*基礎概念總結(基于Ext4.2.1)

Yangcl 12年前發布 | 35K 次閱讀 MarkLogic

研究了一下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. 動態類加載

</div>

//指定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 指定控制器
]

});</pre>

<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'}
    ]
});</pre>



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'
     }
 ]</pre>



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();</pre><img src="https://simg.open-open.com/show/07efc46a6a697f2ac314cb3a3a8e2a14.png" alt="" border="0" /><br />