免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › Web开发 › Ext JS 4: 动态加载与新的类体系
最近访问板块 发新帖
查看: 2260 | 回复: 1
打印 上一主题 下一主题

Ext JS 4: 动态加载与新的类体系 [复制链接]

cu_Cbear

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2012-02-05 18:27 |只看该作者 |倒序浏览
Ext JS 4: 动态加载与新的类体系








Ext JS 4: 动态加载与新的类体系

1
Ext 4 部分新特性介绍：

define　         新的类定义方式,使用增强的原型方式实现继承
mixin　          混入类,类似多继承
setter/getter　属性读写方法配置
require          动态的依赖加载

2




3
Define

Js代码
  1. /**  
  2. * 组件扩展 - 登录窗口  
  3. */  
  4. Ext.define('App.LoginWindow', {   
  5.             extend : 'Ext.Window',   
  6.   
  7.             title : '登录',   
  8.   
  9.             initComponent : function() {   
  10.                 Ext.apply(this, {   
  11.                             items : [{   
  12.                                         xtype : 'textfield',   
  13.                                         name : 'username',   
  14.                                         fieldLabel : '账号'  
  15.                                     }, {   
  16.                                         xtype : 'textfield',   
  17.                                         name : 'password',   
  18.                                         fieldLabel : '密码'  
  19.                                     }]   
  20.                         });   
  21.   
  22.                 App.LoginWindow.superclass.initComponent.apply(this, arguments);   
  23.             }   
  24.         });  

  26. /**
  27. * 组件扩展 - 登录窗口
  28. */
  29. Ext.define('App.LoginWindow', {
  30.                         extend : 'Ext.Window',

  32.                         title : '登录',

  34.                         initComponent : function() {
  35.                                 Ext.apply(this, {
  36.                                                         items : [{
  37.                                                                                 xtype : 'textfield',
  38.                                                                                 name : 'username',
  39.                                                                                 fieldLabel : '账号'
  40.                                                                         }, {
  41.                                                                                 xtype : 'textfield',
  42.                                                                                 name : 'password',
  43.                                                                                 fieldLabel : '密码'
  44.                                                                         }]
  45.                                                 });

  47.                                 App.LoginWindow.superclass.initComponent.apply(this, arguments);
  48.                         }
  49.                 });
复制代码
4
Mixin

Js代码
  1. /**  
  2. * 音乐人  
  3. */  
  4.   
  5. Ext.define('Model.Musician', {   
  6.             extend : 'Model.Person',   
  7.             requires: ['Model'],   
  8.             mixins : {   
  9.                 guitar : 'Interface.CanPlayGuitar',   
  10.                 compose : 'Interface.CanComposeSongs',   
  11.                 sing : 'Interface.CanSing'  
  12.             }   
  13.         });   
  14.   
  15. /**  
  16. * 混入用法  
  17. */  
  18.            
  19. /*  
  20. var someone = Ext.create('Model.Musician');  

  22. someone.getMixin('guitar').playGuitar();  
  23.          
  24. */  

  26. /**
  27. * 音乐人
  28. */

  30. Ext.define('Model.Musician', {
  31.                         extend : 'Model.Person',
  32.             requires: ['Model'],
  33.                         mixins : {
  34.                                 guitar : 'Interface.CanPlayGuitar',
  35.                                 compose : 'Interface.CanComposeSongs',
  36.                                 sing : 'Interface.CanSing'
  37.                         }
  38.                 });

  40. /**
  41. * 混入用法
  42. */
  43.         
  44. /*
  45. var someone = Ext.create('Model.Musician');

  47. someone.getMixin('guitar').playGuitar();
  48.         
  49. */
复制代码
Js代码
  1. /**  
  2. * 玩吉它  
  3. */  
  4.   
  5. Ext.define('Interface.CanPlayGuitar', {   
  6.             playGuitar : function() {   
  7.                 Ext.Msg.alert('info', 'Play Guitar');   
  8.             }   
  9.         });  

  11. /**
  12. * 玩吉它
  13. */

  15. Ext.define('Interface.CanPlayGuitar', {
  16.                         playGuitar : function() {
  17.                                 Ext.Msg.alert('info', 'Play Guitar');
  18.                         }
  19.                 });
复制代码
5
setter/getter

Js代码
  1. /**  
  2. * 人  
  3. */  
  4. // ExtJS3   
  5. /*  
  6. Model.Person = Ext.extend(Object, {  
  7.             name : 'noname',  

  9.             getName : function() {  
  10.                 return this.name;  
  11.             },  

  13.             resetName : function() {  
  14.                 this.setName('noname');  
  15.             },  

  17.             setName : function(newName) {  
  18.                 this.name = this.applyName(newName) || newName;  
  19.             },  

  21.             applyName : function(newName) {  
  22.                   
  23.             }  
  24.         });  
  25. */  
  26.   
  27. // ExtJS4 框架会自动上面的四个方法.   
  28. Ext.define('Model.Person', {   
  29.             config : {   
  30.                 name : 'noname'  
  31.             },   
  32.                
  33.             // @override   
  34.             applyName : function(newName) {   
  35.                 // 值改变时,执行一些动作   
  36.             }   
  37.         });  

  39. /**
  40. * 人
  41. */
  42. // ExtJS3
  43. /*
  44. Model.Person = Ext.extend(Object, {
  45.                         name : 'noname',

  47.                         getName : function() {
  48.                                 return this.name;
  49.                         },

  51.                         resetName : function() {
  52.                                 this.setName('noname');
  53.                         },

  55.                         setName : function(newName) {
  56.                                 this.name = this.applyName(newName) || newName;
  57.                         },

  59.                         applyName : function(newName) {
  60.                
  61.                         }
  62.                 });
  63. */

  65. // ExtJS4 框架会自动上面的四个方法.
  66. Ext.define('Model.Person', {
  67.                         config : {
  68.                                 name : 'noname'
  69.                         },
  70.             
  71.             // @override
  72.             applyName : function(newName) {
  73.                 // 值改变时,执行一些动作
  74.             }
  75.                 });
复制代码
6
require

Model.js
Js代码
  1. /**  
  2. * 命名空间  
  3. */  
  4.    
  5. Ext.ns('Model');  

  7. /**
  8. * 命名空间
  9. */

  11. Ext.ns('Model');


  14. Musician.js
复制代码
Js代码
  1. /**  
  2. * 音乐人  
  3. */  
  4.   
  5. Ext.define('Model.Musician', {   
  6.             extend : 'Model.Person',   
  7.             requires: ['Model'],   
  8.             mixins : {   
  9.                 guitar : 'Interface.CanPlayGuitar',   
  10.                 compose : 'Interface.CanComposeSongs',   
  11.                 sing : 'Interface.CanSing'  
  12.             }   
  13.         });  

  15. /**
  16. * 音乐人
  17. */

  19. Ext.define('Model.Musician', {
  20.                         extend : 'Model.Person',
  21.             requires: ['Model'],
  22.                         mixins : {
  23.                                 guitar : 'Interface.CanPlayGuitar',
  24.                                 compose : 'Interface.CanComposeSongs',
  25.                                 sing : 'Interface.CanSing'
  26.                         }
  27.                 });
复制代码
ExtJS3 需要等框架加载完成后才能执行, 而ExtJS4 则会根据依赖动态加载JS执行.上面的 Model.Musician 会加载以下JS:
  1. Musician.js
  2. Model.js
  3. Person.js
  4. CanPlayGuitar.js
  5. CanComposeSongs.js
  6. CanSing.js
  7. Interface.js
复制代码
官方动态加载示例:
dev.sencha.com/deploy/LoaderDemo.zip

清风鸟儿

论坛徽章:
0
2楼 [报告]
发表于 2012-02-05 18:27 |只看该作者
谢谢分享
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP