Extjs中使用loader.docxVIP

在EXTJS官网看到一片文章，讲的是Extjs.Loader的使用方法，文章非常详细的介绍了Loader的机制及用法，感觉非常不错，但无奈英文实在太烂，就没转过来。昨天恰好在CSDN看到了这篇文章的译文，而译文的质量非常高，对译者的翻译水平怎一个羡慕了得。废话不多说，正文开始。在开始之前，将英文原文链接放上来，英文水平高的可以看看原文哦。链接地址：/blog/using-ext-loader-for-your-application//blog/using-ext-loader-for-your-application/ExtJS 4.0是一个使用新的依赖系统的类加载系统。这两个强大的新功能允许你创建大量允许浏览器按需下载脚本代码的应用。今天，我们将通过建立一个小的使用新的类加载系统的应用程序来熟悉一下依赖管理系统。同时，我们将讨论Ext加载系统的各种配置项。在开始之前，我们先来看看将要实现的结果。这样做，可使我们确定需要扩展那些类。应用会包括互相绑定的GridPanel和FormPanel，名称分别为UserGridPanel和UserFormPanel。UserGridPanel的操作需要创建一个模型和Store。UserGridPanel和UserFormPanel将被渲染到一个名称为UserEditorWindow的窗口，它扩张自ExtJS的Window类。所有这些类都会在命名空间MyApp下。在开始编码前，首先要确定目录结构，以下是使用命名空间组织的文件夹：从上图可以看到，MyApp目录已经按照命名空间进拆分成几个目录。在完成开发的时候，我们的应用将会有一个如下图所示的内部依赖运行模型。（尽管应用的目录构成很象ExtJS 4 MVC架构，事实上示例并没有使用它 ）现在开始编写index.html文件，这里需要包含应用需要的启动文件和应用的根文件(app.js)。?!DOCTYPE?HTML?PUBLIC??-//W3C//DTD?HTML?4.01//EN?/TR/html4/strict.dtd html head ?titleExt?4?Loader/title ?link?rel=stylesheet?type=text/css??href=js/ext-4.0.1/resources/css/ext-all.css?/ ?script?type=text/javascript?src=js/ext-4.0.1/ext-debug.js/script ?script?type=text/javascript?src=js/MyApp/app.js/script /head body /body /html !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtdhtmlhead titleExt 4 Loader/title link rel=stylesheet type=text/css href=js/ext-4.0.1/resources/css/ext-all.css / script type=text/javascript src=js/ext-4.0.1/ext-debug.js/script script type=text/javascript src=js/MyApp/app.js/script/headbody/body/htmlindex.html文件中需要使用link标记包含ExtJS 4的样式文件。包含ext-debug.js文件的javascript标记可能要修改多次，ext-all-debug.js文件是开发调试用的，而ext-all.js则是在发布产品时使用的。这里有几个选择，每个选择都有优缺点。以下是这些文件的说明：ext-all-debug-w-comments.js：带注释的的完整调试版本。文件比较大，加载时间比较长。ext-all-debug.js : 不带注释的完整调试版本。文件也比较大，但很适合调试。ext-all.js ；压缩后的完整版本，文件比较小。使用该版本调试很困难，因此一般在发布产品时才使用。ext-debug.js ： 该文件只包含ExtJS基础架构和空的结构。使用该文件，可以实现ExtJS类文件的远程加载，而且提供了很好的调试体验，不过代价是相当的慢。ext.js : ext-debug.js的压缩版本。我们的index.html将使用ext-debug.js文件，这是实现动态加载所需的最低要求。最后，我们将展示如何使用ext-all版本获取最好的结果。由于UserGridPanel 类要求模型和Store，因而，要先定义编写这些支持类。现在开始编写模型和Store：?