首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在应用中使用ExtLoader

作者：迷迷糊糊的Nancy | 来源：互联网 | 2023-06-04 11:28
原文：http:www.sencha.comblogusing-ext-loader-for-your-applicationExtJS4.0是一个使用新的依赖系统的类加载系统

原文：http://www.sencha.com/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)。

 

1  DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2  <html>
3  <head>
4      <title>Ext 4 Loader</title>
5      <link rel="stylesheet" type="text/css"  href="js/ext-4.0.1/resources/css/ext-all.css" />
6      
7      <script type="text/Javascript" src="js/MyApp/app.js">
8  </head>
9  <body>
10  </body>
11  </html>

      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：

1  Ext.define('MyApp.models.UserModel', {
2      extend   : 'Ext.data.Model',
3      fields   : [
4          'firstName',
5          'lastName',
6          'dob',
7          'userName'
8      ]
9  });

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

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

1  Ext.define('MyApp.stores.UserStore', {
2      extend    : 'Ext.data.Store',
3      singleton : true,
4      requires  : ['MyApp.models.UserModel'],
5      model     : 'MyApp.models.UserModel',
6      constructor : function() {
7          this.callParent(arguments);
8          this.loadData([
9              {
10                  firstName : 'Louis',
11                  lastName  : 'Dobbs',
12                  dob       : '12/21/34',
13                  userName  : 'ldobbs'
14              },
15              {
16                  firstName : 'Sam',
17                  lastName  : 'Hart',
18                  dob       : '03/23/54',
19                  userName  : 'shart'
20              },
21              {
22                  firstName : 'Nancy',
23                  lastName  : 'Garcia',
24                  dob       : '01/18/24',
25                  userName  : 'ngarcia'
26              }
27          ]);
28      }
29  });

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

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

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

1  Ext.define('MyApp.views.UsersGridPanel', {
2      extend   : 'Ext.grid.Panel',
3      alias    : 'widget.UsersGridPanel',
4      requires : ['MyApp.stores.UserStore'],
5      initComponent : function() {
6          this.store   = MyApp.stores.UserStore;
7          this.columns = this.buildColumns();
8          this.callParent();
9      },
10      buildColumns : function() {
11          return [
12              {
13                  header    : 'First Name',
14                  dataIndex : 'firstName',
15                  width     : 70
16              },
17              {
18                  header    : 'Last Name',
19                  dataIndex : 'lastName',
20                  width     : 70
21              },
22              {
23                  header    : 'DOB',
24                  dataIndex : 'dob',
25                  width     : 70
26              },
27              {
28                  header    : 'Login',
29                  dataIndex : 'userName',
30                  width     : 70
31              }
32          ];
33      }
34  });

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

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

1  Ext.define('MyApp.views.UserFormPanel', {
2      extend      : 'Ext.form.Panel',
3      alias       : 'widget.UserFormPanel',
4      bodyStyle   : 'padding: 10px; background-color: #DCE5F0;' 
5              + ' border-left: none;',
6      defaultType : 'textfield',
7      defaults    : {
8          anchor     : '-10',
9          labelWidth : 70
10      },
11      initComponent : function() {
12          this.items = this.buildItems();
13          this.callParent();
14      },
15      buildItems : function() {
16          return [
17              {
18                  fieldLabel : 'First Name',
19                  name       : 'firstName'
20              },
21              {
22                  fieldLabel : 'Last Name',
23                  name       : 'lastName'
24              },
25              {
26                  fieldLabel : 'DOB',
27                  name       : 'dob'
28              },
29              {
30                  fieldLabel : 'User Name',
31                  name       : 'userName'
32              }
33          ];
34      }
35  });

 

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

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

1  Ext.define('MyApp.views.UserEditorWindow', {
2      extend   : 'Ext.Window',
3      requires : ['MyApp.views.UsersGridPanel','MyApp.views.UserFormPanel'],
4      height : 200,
5      width  : 550,
6      border : false,
7      layout : {
8          type  : 'hbox',
9          align : 'stretch'
10      },
11      initComponent : function() {
12          this.items   = this.buildItems();
13          this.buttons = this.buildButtons();
14          this.callParent();
15          this.on('afterrender', this.onAfterRenderLoadForm, this);
16      },
17      buildItems : function() {
18          return [
19              {
20                  xtype     : 'UsersGridPanel',
21                  width     : 280,
22                  itemId    : 'userGrid',
23                  listeners : {
24             
推荐阅读
  • 扩展

    使用粘性页眉和页脚切换侧栏 - Toggle Sidebar with sticky header and footer

    Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]
  • 扩展

    使用圣杯布局模式实现网站首页的内容布局

    使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • copy

    用JavaScript实现《铁甲无敌奖门人》“开口中”猜数游戏

    JavaScript在常人看来都是门出不了厅堂的小语言，仅管它没有明星语言的闪耀，但至少网页的闪耀还是需要它的，同时它是一门很实用的语言，本人平时就喜欢拿它来写点实用工具或应用，本文演示用JavaSc ... [详细]
  • js

    与Internet Explorer的Fancybox Iframe错误 - Fancybox Iframe bug with internet explorer

    ImgettingabugwithInternetExplorer.Theiframedoesnthavecorrectsizeanditisdisplayedo ... [详细]
  • js

    【译】发送表单数据

    这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细]
  • js

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • js

    C#之数据集：DataSet对象的使用及相关方法详解

    本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • js

    开发笔记:计网局域网：NAT 是如何工作的？

    开发笔记:计网局域网：NAT 是如何工作的？
    篇首语：本文由编程笔记#小编为大家整理，主要介绍了计网-局域网：NAT是如何工作的？相关的知识，希望对你有一定的参考价值。 ... [详细]
  • js

    Python瓦片图下载、合并、绘图、标记的代码示例

    Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]
  • js

    C#导入、导出功能

    导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]
  • js

    一句话解决高并发的核心原则

    一句话解决高并发的核心原则
    本文介绍了解决高并发的核心原则，即将用户访问请求尽量往前推，避免访问CDN、静态服务器、动态服务器、数据库和存储，从而实现高性能、高并发、高可扩展的网站架构。同时提到了Google的成功案例，以及适用于千万级别PV站和亿级PV网站的架构层次。 ... [详细]
  • js

    asp中如何嵌入python的简单介绍

    asp中如何嵌入python的简单介绍
    本文目录一览：1、如何在IIS中执行Python脚本 ... [详细]
  • js

    javascript入门·表单与表单元素总结（表单验证）

    表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道 ... [详细]
  • js

    JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

    但有时候，需要当某事件触发时，我们先做一些操作，然后再跳转，这时，就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法：一：跳转到新页面，并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]
  • js

    JavaScript实现在页面间传值的方法

    JavaScript实现在页面间传值的方法-本文实例讲述了JavaScript实现在页面间传值的方法。分享给大家供大家参考。具体如下：问题如下：在a.html页面中，的 ... [详细]
author-avatar
迷迷糊糊的Nancy
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有