在应用中使用Ext Loader

￡神魔★判官ぃ 2022-08-02 00:18 180阅读 0赞

ExtJS 4.0是一个使用新的依赖系统的类加载系统。这两个强大的新功能允许你创建大量允许浏览器按需下载脚本代码的应用。

今天，我们将通过建立一个小的使用新的类加载系统的应用程序来熟悉一下依赖管理系统。同时，我们将讨论Ext加载系统的各种配置项。

在开始之前，我们先来看看将要实现的结果。这样做，可使我们确定需要扩展那些类。

![001_2.jpg][]

应用会包括互相绑定的GridPanel和FormPanel，名称分别为UserGridPanel和UserFormPanel。UserGridPanel的操作需要创建一个模型和Store。UserGridPanel和UserFormPanel将被渲染到一个名称为UserEditorWindow的窗口，它扩张自ExtJS的Window类。所有这些类都会在命名空间MyApp下。

在开始编码前，首先要确定目录结构，以下是使用命名空间组织的文件夹：

![002.jpg][]

从上图可以看到，MyApp目录已经按照命名空间进拆分成几个目录。在完成开发的时候，我们的应用将会有一个如下图所示的内部依赖运行模型。

（*尽管应用的目录构成很象ExtJS 4 MVC架构，事实上示例并没有使用它* ）

![003_1.jpg][]

现在开始编写index.html文件，这里需要包含应用需要的启动文件和应用的根文件(app.js)。

<table style="padding:0px; border-width:0px; width:708px"> 
 <tbody> 
 <tr> 
 <td style="color:teal">1&nbsp;</td> 
 <td>DOCTYPE&nbsp;&nbsp;&nbsp;HTML&nbsp;&nbsp;&nbsp;PUBLIC&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"-//W3C//DTD&nbsp;&nbsp;&nbsp;HTML&nbsp;&nbsp;&nbsp;4.01//EN"&nbsp;&nbsp;"http://www.w3.org/TR/html4/strict.dtd"&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">2&nbsp;</td> 
 <td>&lt;&nbsp;html&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">3&nbsp;</td> 
 <td>&lt;&nbsp;head&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">4&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&nbsp;title&nbsp;&gt;&nbsp;Ext&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;Loader&nbsp;&lt;&nbsp;/title&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">5&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&nbsp;link&nbsp;rel&nbsp;=&nbsp;"&nbsp;stylesheet&nbsp;"&nbsp;type&nbsp;=&nbsp;"&nbsp;text/css&nbsp;"&nbsp;&nbsp;&nbsp;href&nbsp;=&nbsp;"&nbsp;js/ext-4.0.1/resources/css/ext-all.css&nbsp;"&nbsp;&nbsp;&nbsp;/&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">6&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">7&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&nbsp;script&nbsp;&nbsp;&nbsp;type&nbsp;=&nbsp;"&nbsp;text/javascript&nbsp;"&nbsp;&nbsp;&nbsp;src&nbsp;=&nbsp;"&nbsp;js/MyApp/app.js&nbsp;"&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">8&nbsp;</td> 
 <td>&lt;&nbsp;/head&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">9&nbsp;</td> 
 <td>&lt;&nbsp;body&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">10&nbsp;</td> 
 <td>&lt;&nbsp;/body&nbsp;&gt;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">11&nbsp;</td> 
 <td>&lt;&nbsp;/html&nbsp;&gt;</td> 
 </tr> 
 </tbody> 
</table>

index.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：

以上代码扩展自Ext.data.Model，将创建UserModel 类。因为扩展自Ext.data.Model类，ExtJS会自动加载它，并在它加载后创建UserModel类。

下一步，要创建扩展自Ext.data.Store的UserStore 类：

当创建单件模式的UserStore 时，需要在UserStore原型添加一个requires关键字，它会在类实例化前，为ExtJS提供一个类的请求列表。在这个示例，列表中只有UserModel 一个请求类。

（实际上， 在Store的原型中定义了model为UserModel 类，ExtJS就会自动加载它。在requires关键字中列出的目的，是希望你的代码能自文档化（self-documenting），从而提醒你，UserModel 类是必须的 ）

好了，UserGridPanel视图需要的基类已经创建了，现在可以创建UserGridPanel类了：

在上面代码中，要注意requires 关键字，看它是怎么增加UserStore 为请求类的。刚才，我们为GridPanel扩展和Store扩展配置了一个直接的依赖关系。

下一步，我们要创建FormPanel扩展：

因为UserForm 不需要从服务器端请求任何类，因而不需要添加requires定义。

应用快完成了，现在需要创建UserEditorWindow类和运行应用的app.js。以下是UserEditorWindow类的代码。因为要将Grid和表单绑定在一起，因而类代码有点长，请见谅：

<table style="padding:0px; border-width:0px; width:708px"> 
 <tbody> 
 <tr> 
 <td style="color:teal">1&nbsp;</td> 
 <td>Ext&nbsp;.&nbsp;define&nbsp;(&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;views&nbsp;.&nbsp;UserEditorWindow&nbsp;'&nbsp;,&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">2&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extend&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;Ext&nbsp;.&nbsp;Window&nbsp;'&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">3&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requires&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;[&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;views&nbsp;.&nbsp;UsersGridPanel&nbsp;'&nbsp;,&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;views&nbsp;.&nbsp;UserFormPanel'&nbsp;]&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">4&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;200&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">5&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;550&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">6&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;false&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">7&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layout&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">8&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;hbox&nbsp;'&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">9&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;stretch&nbsp;'</td> 
 </tr> 
 <tr> 
 <td style="color:teal">10&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">11&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initComponent&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">12&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;items&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;buildItems&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">13&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;buttons&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;buildButtons&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">14&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;callParent&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">15&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;on&nbsp;(&nbsp;'&nbsp;afterrender&nbsp;'&nbsp;,&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;onAfterRenderLoadForm&nbsp;,&nbsp;&nbsp;&nbsp;this&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">16&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">17&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buildItems&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">18&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;&nbsp;&nbsp;[</td> 
 </tr> 
 <tr> 
 <td style="color:teal">19&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">20&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xtype&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;UsersGridPanel&nbsp;'&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">21&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;280&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">22&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itemId&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;userGrid&nbsp;'&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">23&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listeners&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">24&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;this&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">25&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itemclick&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;onGridItemClick</td> 
 </tr> 
 <tr> 
 <td style="color:teal">26&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</td> 
 </tr> 
 <tr> 
 <td style="color:teal">27&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">28&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">29&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xtype&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;UserFormPanel&nbsp;'&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">30&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itemId&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;userForm&nbsp;'&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">31&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;1</td> 
 </tr> 
 <tr> 
 <td style="color:teal">32&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</td> 
 </tr> 
 <tr> 
 <td style="color:teal">33&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">34&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">35&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buildButtons&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">36&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;&nbsp;&nbsp;[</td> 
 </tr> 
 <tr> 
 <td style="color:teal">37&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">38&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;Save&nbsp;'&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">39&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;this&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">40&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;onSaveBtn</td> 
 </tr> 
 <tr> 
 <td style="color:teal">41&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">42&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">43&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;New&nbsp;'&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">44&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;this&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">45&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;onNewBtn</td> 
 </tr> 
 <tr> 
 <td style="color:teal">46&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</td> 
 </tr> 
 <tr> 
 <td style="color:teal">47&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">48&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">49&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onGridItemClick&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;function&nbsp;(&nbsp;view&nbsp;,&nbsp;&nbsp;&nbsp;record&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">50&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;&nbsp;&nbsp;formPanel&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;getComponent&nbsp;(&nbsp;'&nbsp;userForm&nbsp;'&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">51&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;formPanel&nbsp;.&nbsp;loadRecord&nbsp;(&nbsp;record&nbsp;)</td> 
 </tr> 
 <tr> 
 <td style="color:teal">52&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">53&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSaveBtn&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">54&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;&nbsp;&nbsp;gridPanel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;getComponent&nbsp;(&nbsp;'&nbsp;userGrid&nbsp;'&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">55&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gridStore&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;gridPanel&nbsp;.&nbsp;getStore&nbsp;(&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">56&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;formPanel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;getComponent&nbsp;(&nbsp;'&nbsp;userForm&nbsp;'&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">57&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;basicForm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;formPanel&nbsp;.&nbsp;getForm&nbsp;(&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">58&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentRec&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;basicForm&nbsp;.&nbsp;getRecord&nbsp;(&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">59&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;formData&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;basicForm&nbsp;.&nbsp;getValues&nbsp;(&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">60&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;storeIndex&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;gridStore&nbsp;.&nbsp;indexOf&nbsp;(&nbsp;currentRec&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">61&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">62&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;loop&nbsp;&nbsp;&nbsp;through&nbsp;&nbsp;&nbsp;the&nbsp;&nbsp;&nbsp;record&nbsp;&nbsp;&nbsp;and&nbsp;&nbsp;&nbsp;set&nbsp;&nbsp;&nbsp;values</td> 
 </tr> 
 <tr> 
 <td style="color:teal">63&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentRec&nbsp;.&nbsp;beginEdit&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">64&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;&nbsp;&nbsp;(&nbsp;key&nbsp;&nbsp;&nbsp;in&nbsp;&nbsp;&nbsp;formData&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">65&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentRec&nbsp;.&nbsp;set&nbsp;(&nbsp;key&nbsp;,&nbsp;&nbsp;&nbsp;formData&nbsp;[&nbsp;key&nbsp;]&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">66&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</td> 
 </tr> 
 <tr> 
 <td style="color:teal">67&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentRec&nbsp;.&nbsp;endEdit&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">68&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentRec&nbsp;.&nbsp;commit&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">69&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;Add&nbsp;&nbsp;&nbsp;and&nbsp;&nbsp;&nbsp;select</td> 
 </tr> 
 <tr> 
 <td style="color:teal">70&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;&nbsp;&nbsp;(&nbsp;storeIndex&nbsp;&nbsp;&nbsp;=&nbsp;=&nbsp;&nbsp;&nbsp;-&nbsp;1&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">71&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gridStore&nbsp;.&nbsp;add&nbsp;(&nbsp;currentRec&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">72&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gridPanel&nbsp;.&nbsp;getSelectionModel&nbsp;(&nbsp;)&nbsp;.&nbsp;select&nbsp;(&nbsp;currentRec&nbsp;)</td> 
 </tr> 
 <tr> 
 <td style="color:teal">73&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</td> 
 </tr> 
 <tr> 
 <td style="color:teal">74&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">75&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onNewBtn&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">76&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;&nbsp;&nbsp;gridPanel&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;getComponent&nbsp;(&nbsp;'&nbsp;userGrid&nbsp;'&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">77&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;formPanel&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;getComponent&nbsp;(&nbsp;'&nbsp;userForm&nbsp;'&nbsp;)&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">78&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newModel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;Ext&nbsp;.&nbsp;ModelManager&nbsp;.&nbsp;create&nbsp;(&nbsp;{&nbsp;}&nbsp;,&nbsp;&nbsp;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">79&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;models&nbsp;.&nbsp;UserModel&nbsp;'&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">80&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gridPanel&nbsp;.&nbsp;getSelectionModel&nbsp;(&nbsp;)&nbsp;.&nbsp;clearSelections&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">81&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;formPanel&nbsp;.&nbsp;getForm&nbsp;(&nbsp;)&nbsp;.&nbsp;loadRecord&nbsp;(&nbsp;newModel&nbsp;)</td> 
 </tr> 
 <tr> 
 <td style="color:teal">82&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">83&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onAfterRenderLoadForm&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">84&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this&nbsp;.&nbsp;onNewBtn&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">85&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</td> 
 </tr> 
 <tr> 
 <td style="color:teal">86&nbsp;</td> 
 <td>}&nbsp;)&nbsp;;</td> 
 </tr> 
 </tbody> 
</table>

UserEditorWindow 的代码包含了许多东西用来管理UserGridPanel和UserFormPanel类的整个绑定的声明周期。为了指示ExtJS在创建该类前加载这两个类，必须在requires列表里列出它们。

现在完成最后一个文件app.js。为了最大限度地提高我们的学习，将有3次修改要做。首先从最简单配置开始，然后逐步添加。

<table style="padding:0px; width:708px"> 
 <tbody> 
 <tr> 
 <td style="color:teal">1&nbsp;</td> 
 <td>Ext&nbsp;.&nbsp;Loader&nbsp;.&nbsp;setPath&nbsp;(&nbsp;'&nbsp;MyApp&nbsp;'&nbsp;,&nbsp;&nbsp;&nbsp;'&nbsp;js&nbsp;/&nbsp;MyApp&nbsp;'&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">2&nbsp;</td> 
 <td>Ext&nbsp;.&nbsp;onReady&nbsp;(&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">3&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ext&nbsp;.&nbsp;create&nbsp;(&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;views&nbsp;.&nbsp;UserEditorWindow&nbsp;'&nbsp;)&nbsp;.&nbsp;show&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">4&nbsp;</td> 
 <td>}&nbsp;)&nbsp;;</td> 
 </tr> 
 </tbody> 
</table>

首先，app.js会在ExtJS添加MyApp命名空间的路径，这可通过调用Ext.loader.setPath方法实现，方法的第1个参数是命名空间，然后是加载文件与页面的相对路径。

下一步，调用Ext.OnReady方法，传递一个包含Ext.create的匿名函数。Ext.create会在ExtJS 4.0初始化之后执行，以字符串形式传递的UserEditorWindow 类会被实例化。因为不需要指向实例和希望立即显示它，因而在后面串接了show方法的调用。

如果你打开这个页面（[http://moduscreate.com/senchaarticles/01/pass1.html][http_moduscreate.com_senchaarticles_01_pass1.html] ），你会看到UI渲染，但很慢，并且ExtJS会在Firebug中显示以下警告信息：

![004.jpg][]

ExtJS提示我们没有使用加载系统最优化的方式。这是第二步要讨论的问题。然后，这是一个好的学习机会，要好好理由。

我们需要配置Firebug在控制台中显示XHR请求，以便在控制台中看到所有请求，而不需要切换到网络面板。这样，我们不单可以观察到类依赖系统的工作情况，还可以从所有ExtJS类加载的文件中通过过滤方式找到我们要求这样的文件。

在Firebug控制台过滤输入框中输入“User”，你会看到下图所示的结果。

![005.jpg][]

从图中可以看到，UserEditorWindow类第一个被加载，接着请求UserGridPanel。UserGridPanel 要求UserStore和UserModel类。最后加载UserFormPanel 类。

我刚才提到，ExtJS提示了我们没有使用加载系统最优化的方式。这是因为依赖是在Ext.OnReady触发加载之后通过同步XHR请求确定的，而这不是有效的方式且难于调试。

未来修正这个问题，可以修改app.js指示ExtJS先加载我们定义的类，这样即可提供性能又便于调试：

<table style="padding:0px; width:708px"> 
 <tbody> 
 <tr> 
 <td style="color:teal">1&nbsp;</td> 
 <td>Ext&nbsp;.&nbsp;Loader&nbsp;.&nbsp;setPath&nbsp;(&nbsp;'&nbsp;MyApp&nbsp;'&nbsp;,&nbsp;&nbsp;&nbsp;'&nbsp;js&nbsp;/&nbsp;MyApp&nbsp;'&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">2&nbsp;</td> 
 <td>Ext&nbsp;.&nbsp;require&nbsp;(&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;views&nbsp;.&nbsp;UserEditorWindow&nbsp;'&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">3&nbsp;</td> 
 <td>Ext&nbsp;.&nbsp;onReady&nbsp;(&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">4&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ext&nbsp;.&nbsp;create&nbsp;(&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;views&nbsp;.&nbsp;UserEditorWindow&nbsp;'&nbsp;)&nbsp;.&nbsp;show&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">5&nbsp;</td> 
 <td>}&nbsp;)&nbsp;;</td> 
 </tr> 
 </tbody> 
</table>

为了快速加载我们定义的类和避免调试信息，可简单的在Ext.onReady前调用Ext.require，只是ExtJS请求UserEditorWindow类。这将会让ExtJS在文档HEAD标记内注入一个script标记，运行资源在Ext.OnReady前加载。

查看[http://moduscreate.com/senchaarticles/01/pass2.html][http_moduscreate.com_senchaarticles_01_pass2.html] 可看到它是如何工作地。在页面加载后，你会注意到ExtJS没有在控制台显示警告信息了。

我们所做的是让ExtJS框架和应用类延迟加载。虽然这样做调试很好，但是对于需要快速调试的情况，页面渲染时间会让你感到痛苦。为什么？

原因很简单，因为这需要加载许多资源文件。在示例中，ExtJS发送了193个Javascript资源请求到web服务器，还有部分是在缓存中的：

![006.jpg][]

我们创建了6个Javascript文件（5个类文件和app.js），这意味着加载要求的ExtJS文件有187个请求。当你在本地做开发的时候，这个方案可行，但不是最理想的和效果最好的。

解决这个问题，我们可以使用折中方案，通过ext-all-debug加载ExtJS框架，动态加载我们的类文件。要实现这个，需要修改两个文件。

首先，需要修改Index.html，使用ext-all-debug.js替换ext.debug.js。

<table style="padding:0px; width:708px"> 
 <tbody> 
 <tr> 
 <td style="color:teal">1&nbsp;</td> 
 <td>&lt;&nbsp;script&nbsp;&nbsp;&nbsp;type&nbsp;=&nbsp;"&nbsp;text/javascript&nbsp;"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src&nbsp;=&nbsp;"&nbsp;js/ext-4.0.1/ext-all-debug.js&nbsp;"&nbsp;&gt;&nbsp;&lt;&nbsp;/&nbsp;script&gt;</td> 
 </tr> 
 </tbody> 
</table>

接着，修改app.js，开启Ext.Loader：

<table style="padding:0px; width:708px"> 
 <tbody> 
 <tr> 
 <td style="color:teal">1&nbsp;</td> 
 <td>(&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">2&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ext&nbsp;.&nbsp;Loader&nbsp;.&nbsp;setConfig&nbsp;(&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">3&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enabled&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;true&nbsp;,</td> 
 </tr> 
 <tr> 
 <td style="color:teal">4&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paths&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">5&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MyApp&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;'&nbsp;js&nbsp;/&nbsp;MyApp&nbsp;'</td> 
 </tr> 
 <tr> 
 <td style="color:teal">6&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">7&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">8&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">9&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ext&nbsp;.&nbsp;require&nbsp;(&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;views&nbsp;.&nbsp;UserEditorWindow&nbsp;'&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">10&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">11&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ext&nbsp;.&nbsp;onReady&nbsp;(&nbsp;function&nbsp;(&nbsp;)&nbsp;&nbsp;&nbsp;{ </td> 
 </tr> 
 <tr> 
 <td style="color:teal">12&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ext&nbsp;.&nbsp;create&nbsp;(&nbsp;'&nbsp;MyApp&nbsp;.&nbsp;views&nbsp;.&nbsp;UserEditorWindow&nbsp;'&nbsp;)&nbsp;.&nbsp;show&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">13&nbsp;</td> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;)&nbsp;;</td> 
 </tr> 
 <tr> 
 <td style="color:teal">14&nbsp;</td> 
 <td>}&nbsp;)&nbsp;(&nbsp;)&nbsp;;</td> 
 </tr> 
 </tbody> 
</table>

通过调用Loader.setConfig可开启Ext.Loader，需要传递一个匿名对象，它的eanbled属性设置为true，而命名空间设置为路径映射。

通过编辑app.js，在本地开发环境下，应用将会在1秒内完成加载和渲染。

![007.png][]

源代码下载地址：[http://moduscreate.com/senchaarticles/01/files.zip][http_moduscreate.com_senchaarticles_01_files.zip]

作者：

**Jay Garcia**   
Author of [Ext JS in Action][] and [Sencha Touch in Action][] , Jay Garcia has been an evangelist of Sencha-based JavaScript frameworks since 2006. Jay is also Co-Founder and CTO of [Modus Create][] , a digital agency focused on leveraging top talent to develop high quality Sencha-based applications. Modus Create is a Sencha Premier partner.

[001_2.jpg]: /images/20220731/bf9ff65b1e2b4c3e87f65a5d83b2101b.png
[002.jpg]: /images/20220731/0afd4017dea44c5ea7ac840b95c195f9.png
[003_1.jpg]: /images/20220731/98d52aa45b464c45b8c23bd21543a423.png
[http_moduscreate.com_senchaarticles_01_pass1.html]: http://moduscreate.com/senchaarticles/01/pass1.html
[004.jpg]: /images/20220731/549f237d76894a2ba6a6eb28b67ab2d7.png
[005.jpg]: /images/20220731/10f222f3895041239669375b742d782f.png
[http_moduscreate.com_senchaarticles_01_pass2.html]: http://moduscreate.com/senchaarticles/01/pass2.html
[006.jpg]: /images/20220731/a527926ee03d4fe18e1e4e97421c587c.png
[007.png]: /images/20220731/dc02186c9fe3450fb78dce2a24e6253c.png
[http_moduscreate.com_senchaarticles_01_files.zip]: http://moduscreate.com/senchaarticles/01/files.zip
[Ext JS in Action]: http://manning.com/garcia
[Sencha Touch in Action]: http://manning.com/garcia2
[Modus Create]: http://moduscreate.com/