研究了一下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 类加载路径 |
02 |
Ext.Loader.setConfig({enabled:true, paths:{Hongbo:"app"}});
|
03 |
04 |
Ext.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 |
var fn = function()
|
03 |
{
|
04 |
alert("此用户的名字是：" + this.name);
|
05 |
}
|
06 |
var user = {
|
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 |
var p = new Hongbo.Person();
|
18 |
p.walk();
|
19 |
</script> |
01 |
Ext.define("MyClass.A", {
|
02 |
showA: function(){
|
03 |
console.log("A");
|
04 |
}
|
05 |
}); |
06 |
Ext.define("MyClass.B", {
|
07 |
showB: function(){
|
08 |
console.log("B");
|
09 |
}
|
10 |
}); |
11 |
Ext.define("MyClass.C", {
|
12 |
mixins: {
|
13 |
classA: "MyClass.A",
|
14 |
classB: "MyClass.B"
|
15 |
},
|
16 |
showC: function(){
|
17 |
console.log("C");
|
18 |
}
|
19 |
}); |
20 |
var objC = Ext.create("MyClass.C");
|
21 |
objC.showA(); // 控制台结果：A
|
22 |
objC.showB(); // 控制台结果：B
|
23 |
objC.showC(); // 控制台结果：C
|
01 |
<script type="text/javascript">
|
02 |
Ext.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对象 |
16 |
var user = Ext.create("Hongbo.User",
|
17 |
{
|
18 |
name: "屌缌周",
|
19 |
password: "1234"
|
20 |
});
|
21 |
alert(user.name + "-->" + user.password);
|
22 |
</script> |
01 |
Ext.define('MyApp.CoolPanel', {
|
02 |
extend: 'Ext.panel.Panel',
|
03 |
alias: ['widget.coolpanel'],
|
04 |
title: 'Yeah!'
|
05 |
}); |
06 |
07 |
// Using Ext.create |
08 |
Ext.create('widget.coolpanel');
|
09 |
10 |
// Using the shorthand for defining widgets by xtype |
11 |
Ext.widget('panel', {
|
12 |
items: [
|
13 |
{xtype: 'coolpanel', html: 'Foo'},
|
14 |
{xtype: 'coolpanel', html: 'Bar'}
|
15 |
]
|
16 |
}); |
01 |
items: [ |
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 |
]
|
01 |
Ext.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 |
var p = Ext.create("Patient",
|
44 |
{
|
45 |
name: "L",
|
46 |
phone: "9876-5432",
|
47 |
gender: "Unknown",
|
48 |
birthday: "95/26/1986"
|
49 |
});
|
50 |
51 |
var errors = p.validate();
|
52 |
errors.isValid();
|
转自：http://www.open-open.com/home/space.php?uid=135360&do=blog&id=11658