65.9K
CodeProject 正在变化。 阅读更多。
Home

ExtJs - Hello World

AnkitkJain
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.50/5 (2投票s)

2015 年 1 月 10 日

CPOL

5分钟阅读

viewsIcon

40872

downloadIcon

932

ExtJs - 适合初学者的 JavaScript 框架

引言

此技巧仅适用于希望在 Web 应用程序中开始使用 ExtJs 的初学者。ExtJs 是 Sencha 提供的一个 JavaScript 框架，用于开发交互式 Web 应用程序。ExtJs 提供了一个基于 JavaScript 的类库，几乎包含了开发 Web 应用程序所需的一切（UI 组件、CSS 编译器、Ajax、布局等）。在使用 ExtJs 之前，我们需要了解为什么使用 ExtJs 开发 Web 应用程序是有益的。此技巧提供了使用 ExtJs 框架的基本思路。

背景

您在开发 Web 应用程序时肯定使用过 HTML。ExtJs 也是一个 HTML5 框架，您无需编写 HTML :) 它是一个纯粹的 JavaScript 框架，包含一个基于 JavaScript 的类库，可以帮助我们完成开发 Web 应用程序所需的一切。

为什么选择 ExtJs？

  • ExtJs 提供跨浏览器兼容性，这意味着它会自动处理大多数 Web 浏览器中的所有差异。
  • ExtJs 提供了一种开发单页应用程序（SPA）的方式。
  • Ext JS 包含一个庞大的基于 JavaScript 的类库，可以帮助我们完成开发 Web 应用程序所需的一切，例如 UI 组件、UI 布局、网络、CSS 编译器等。开发人员只需相应地配置组件即可。
  • Ext JS 提供了一种编写面向对象代码的方式，通过定义类，使用继承，并根据需要创建类的实例。
  • ExtJs 提供了一种按照 MVC 设计模式开始应用程序开发的方式。

ExtJs 库

您可以从 http://www.sencha.com/products/extjs/ 下载 ExtJs 包。解压 Ext JS 包后，您会在包中找到一些文件和文件夹。其中有几个 JavaScript 文件包含 Ext JS 框架的各种组件。文件名中包含“all”的文件包含整个框架，如果您选择其中一个，所有类都将被加载到用户的浏览器中。通常，使用其中一个文件即可包含整个 ExtJs 框架。

  • ext-all.js：这是 Ext JS 库的精简版，看起来像一行 140 万个字符。
  • ext-all-debug.js：Ext JS 的人类可读源代码，不包含注释。
  • ext-all-dev.js：Ext JS 的人类可读源代码，包含 console.log() 语句，这些语句会在浏览器的控制台中生成和输出调试信息。

因此，您可以使用其中任何一个来将 ExtJs 库组件包含到您的 Web 应用程序中。

创建 ExtJs 应用程序 – Hello World

让我们开始使用 Sencha ExtJs 框架构建一个简单的 Web 应用程序。

我们将创建一个简单的 Web 应用程序，它只有一个物理页面（aspx/html），并且最少，每个 Ext JS 应用程序将包含一个 HTML 文件和一个 JavaScript 文件 — 通常是 index.html 和 app.js。

index.html 文件或您的默认页面将包含对 Ext JS 库的 CSS 和 JavaScript 代码的引用，以及包含您的应用程序代码的 app.js（基本上是您 Web 应用程序的起点）。

让我们创建一个使用 ext js 库组件的简单 Web 应用程序。

步骤 1：创建一个空的 Web 应用程序

正如截图所示，我已经创建了一个空的 Web 应用程序以使其简单化，您可以使用任何 Web 应用程序项目。

步骤 2：添加一个默认的 Web 页面

如果您创建了一个空的 Web 应用程序，那么我们需要包含一个 Web 页面，该页面将是我们的应用程序的启动页面。

步骤 3：将 Ext Js 引用添加到 Default.aspx

此步骤展示了我们如何利用 ExtJs 库。如截图所示，在 Default.aspx 中，我只引用了 3 个文件。

  • ext-all.js
  • ext-all.css
  • app.js

Ext 已与 CacheFly（一个全球内容网络）合作，为 Ext JS 框架提供免费的 CDN 托管。在此示例中，我使用了 EXT CDN 库，我们也可以从我们的项目目录中使用相同的文件（ext-all.js 和 ext-all.css）。

通过引用 app.js，它将被加载到浏览器中，并成为我们应用程序的起点。

除了这些文件，我们还有一个占位符，UI 将在此处渲染，在此示例中，我们有一个 id 为“whitespace”的 div，稍后我们将用它来渲染 UI。

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 
href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script>

步骤 4：在您的 Web 项目中添加 app 文件夹和 app.js

ExtJs 为我们提供了以 MVC 模式管理代码的方式。正如截图所示，我们有一个单独的文件夹用于我们的 sencha 应用程序，即 **app**，这个文件夹将包含完整的 sencha 应用程序代码，并包含各种文件夹，即 Model、View、Controller、store 等。目前，它只有一个 app.js 文件。

步骤 5：在 app.js 中编写您的代码

App.js 是我们应用程序的起点；在此示例中，我只使用了启动应用程序所需的最低配置。

Ext.application 代表一个 ExtJS 应用程序，它会做几件事情。它会创建一个名为 SenchaApp 的全局变量（在 name 配置中提供），并且所有应用程序类（models、views、controllers、stores）都将驻留在单个命名空间中。Launch 是一个函数，当所有应用程序准备就绪（所有类都已正确加载）时会自动调用。

在此示例中，我们正在创建一个带有某些配置的 Panel，并将其渲染到我们在 Default.aspx 中提供的占位符上。

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});

输出截图

当您运行此 Web 应用程序，并将 Default.aspx 作为启动页面时，浏览器中将出现以下窗口。

关注点

在此技巧中，我们讨论了 ExtJs 库及其在 Web 应用程序中的使用方式。因此，开发人员可以开始在 Web 应用程序中使用 ExtJs 库。

ExtJs 的工作方式与其他 JavaScript 框架（如 AngularJs、Knockout、Jquery 等）类似。Sencha ExtJs 框架提供了一个庞大的基于 JavaScript 的类库，提供了许多现成的功能，可以根据我们的需求进行扩展或修改。

© . All rights reserved.