ExtJs4 基础概念总结

本文摘自：http://www.open-open.com/home/space.php?uid=135360&do=blog&id=11658

研究了一下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'},