zoukankan      html  css  js  c++  java
  • Ext.Loader

    转载:http://blog.csdn.net/yanwushu/article/details/8296372

    Ext.LoaderExtJs4+中是动态加载的核心。一般通过Ext.require()使用。Ext.Loader同时支持同步和异步加载方式。这里,我们将讨论这两种加载方式的优缺点。

    异步加载

     

    优势

     

    跨域访问

    不需要web服务器:你能通过文件系统协议运行程序。比如file://path/to/your/index.html

            舒服的调试体验:错误信息将返回确切的文件名字和行数。

     

    缺点

     

            依赖必须事先指定

     

    使用方法

     

    方法一:明确包含你想要的

    [javascript] view plaincopy
    1. // Syntax   
    2. Ext.require({String/Array} expressions);   
    3.    
    4. // Example: Single alias   
    5. Ext.require('widget.window');   
    6.    
    7. // Example: Single class name   
    8. Ext.require('Ext.window.Window');   
    9.    
    10. // Example: Multiple aliases / class names mix   
    11. Ext.require(['widget.window''layout.border''Ext.data.Connection']);   
    12.    
    13. // Wildcards   
    14. Ext.require(['widget.*''layout.*''Ext.data.*']);   


    方法二,明确排除你不想要的

     

    [javascript] view plaincopy
    1. // Syntax: Note that it must be in this chaining format.   
    2. Ext.exclude({String/Array} expressions)   
    3.    .require({String/Array} expressions);   
    4.    
    5. // Include everything except Ext.data.*   
    6. Ext.exclude('Ext.data.*').require('*');   
    7.    
    8. // Include all widgets except widget.checkbox*,   
    9. // which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.   
    10. Ext.exclude('widget.checkbox*').require('widget.*');   

    同步加载

     

    优势

            它不需要事先指明依赖,事先包含ext-all.js是很方便的
     

    劣势

     

    调试体验不好,除非用Firebug调试,否则出错的文件的名字不会显示。

    不能跨域请求,因为XHR的限制必须是相同的域名。并且因为这个原因,必须有web服务

     

    使用方法

     

    可以遵守一个简单的法则:用Ext.create代替new关键字来实例化对象。

    15 Ext.create('widget.window', { ... }); // Instead of new Ext.window.Window({...}); 

    16 Ext.create('Ext.window.Window', {}); // Same as above, using full class name instead of alias 

    17 Ext.widget('window', {}); // Same as above, all you need is the traditional `xtype` 

    在后台,Ext.ClassManager会自动检查给定的类名或别名是否在页面已经存在。如果没有,Ext.Loader将会立即把它调整为同步模式,自动加载给定的类和它所有的依赖

     

    混合加载


    混合加载方式可以结合同步和异步加载的优势。开发流程非常简单:
    第一步:用同步的方式写你的程序,Ext.Loader将会自动按照需要获取所有的依赖,因为它们在运行时需要。例如:
    [javascript] view plaincopy
    1. Ext.onReady(function(){   
    2.     var window = Ext.createWidget('window', {   
    3.          500,   
    4.         height: 300,   
    5.         layout: {   
    6.             type: 'border',   
    7.             padding: 5   
    8.         },   
    9.         title: 'Hello Dialog',   
    10.         items: [{   
    11.             title: 'Navigation',   
    12.             collapsible: true,   
    13.             region: 'west',   
    14.              200,   
    15.             html: 'Hello',   
    16.             split: true   
    17.         }, {   
    18.             title: 'TabPanel',   
    19.             region: 'center'   
    20.         }]   
    21.     });   
    22.    
    23.     window.show();   
    24. })   


    第二步:观看控制台的中如下的警告:

     

    [javascript] view plaincopy
    1. [Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code  
    2. ClassManager.js:432  
    3. [Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code  


    在Ext.onReady上面添加加载依赖的代码:
    [javascript] view plaincopy
    1. Ext.require('Ext.window.Window');Ext.require('Ext.layout.container.Border');  
    2. Ext.onReady(...);  

    这样,所有的东西都将通过异步的模式加载

     

    发布

     

    有一点很重要,动态加载至能在开发的时候在本机上使用。产品发布的时候,所有的依赖最好是组合成一个独一的JavaScript文件。Ext.Loader使项目从开发维护发布之间转换变得很容易。在内部,Ext.Loader.history控制了你的项目所有依赖的加载顺序的列表。把这个列表中的所有依赖压缩成一个,然后把它包含在你项目的最顶部。这个处理过程将会使用SenchCommand自动完成。

  • 相关阅读:
    代码发布概述图
    gitPython模块
    django重点面试题
    paramiko模块
    Spring Security 注解
    JsonIgnoreProperties JsonIgnore导致RequestBody无法接受参数值
    Http和Rpc区别
    ExceptionHandler(思路参考CustomException)
    Linux安装Nginx
    秒杀扣除库存方案
  • 原文地址:https://www.cnblogs.com/tianma3798/p/3532005.html
Copyright © 2011-2022 走看看