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. 动态类加载

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();