免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 2256 | 回复: 1
打印 上一主题 下一主题

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

论坛徽章:
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.         });  

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

  30.                         title : '登录',

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

  43.                                 App.LoginWindow.superclass.initComponent.apply(this, arguments);
  44.                         }
  45.                 });
复制代码
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');  

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

  24. /**
  25. * 音乐人
  26. */

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

  36. /**
  37. * 混入用法
  38. */
  39.         
  40. /*
  41. var someone = Ext.create('Model.Musician');

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

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

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

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

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

  11.             resetName : function() {  
  12.                 this.setName('noname');  
  13.             },  

  14.             setName : function(newName) {  
  15.                 this.name = this.applyName(newName) || newName;  
  16.             },  

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

  34. /**
  35. * 人
  36. */
  37. // ExtJS3
  38. /*
  39. Model.Person = Ext.extend(Object, {
  40.                         name : 'noname',

  41.                         getName : function() {
  42.                                 return this.name;
  43.                         },

  44.                         resetName : function() {
  45.                                 this.setName('noname');
  46.                         },

  47.                         setName : function(newName) {
  48.                                 this.name = this.applyName(newName) || newName;
  49.                         },

  50.                         applyName : function(newName) {
  51.                
  52.                         }
  53.                 });
  54. */

  55. // ExtJS4 框架会自动上面的四个方法.
  56. Ext.define('Model.Person', {
  57.                         config : {
  58.                                 name : 'noname'
  59.                         },
  60.             
  61.             // @override
  62.             applyName : function(newName) {
  63.                 // 值改变时,执行一些动作
  64.             }
  65.                 });
复制代码
6
require

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

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

  9. Ext.ns('Model');


  10. 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.         });  

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

  17. Ext.define('Model.Musician', {
  18.                         extend : 'Model.Person',
  19.             requires: ['Model'],
  20.                         mixins : {
  21.                                 guitar : 'Interface.CanPlayGuitar',
  22.                                 compose : 'Interface.CanComposeSongs',
  23.                                 sing : 'Interface.CanSing'
  24.                         }
  25.                 });
复制代码
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 |只看该作者
谢谢分享
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

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

清除 Cookies - ChinaUnix - Archiver - WAP - TOP