osted 周五, 07/19/2013 - 10:57 by admin
研究了一下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();
扫一扫
872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
