手动创建 Hello World 应用程序
让我们开始使用 ExtJS 来构建一个简单的 Web 应用程序。
我们将创建一个简单的 Web 应用程序，它只有一个物理页面（aspx / html）。每个 ExtJS 应用程序至少包含一个 HTML 和一个 JavaScript 文件 - 通常是 index.html 和 app.js.
文件 index.html 或你的默认页面将包含对 ExtJS 的 CSS 和 JavaScript 代码的引用，以及包含应用程序代码的 app.js 文件（基本上是 Web 应用程序的起点）。
让我们创建一个使用 ExtJS 库组件的简单 Web 应用程序：
第 1 步：创建一个空的 Web 应用程序
如截图所示，我创建了一个空的 Web 应用程序。为简单起见，你可以在所选的编辑器或 IDE 中使用任何 Web 应用程序项目。 https://i.stack.imgur.com/cJMlb.jpg
第 2 步：添加默认网页
如果你已经创建了一个空 Web 应用程序，那么我们需要包含一个网页，该网页将成为我们应用程序的起始页面。
https://i.stack.imgur.com/m6moG.jpg
第 3 步：将 Ext Js 引用添加到 Default.aspx
此步骤显示了我们如何使用 extJS 库。如 Default.aspx 中的屏幕截图所示，我刚刚引用了 3 个文件：
- EXT-all.js
- EXT-all.css
- app.js
Sencha 与全球内容网络 CacheFly 合作，为 ExtJS 框架提供免费的 CDN 托管。在这个示例中，我使用了 Ext 的 CDN 库，但是我们可以在项目目录中使用相同的文件（ext-all.js 和 ext-all.css），或者在 CDN 不可用时使用备份。
通过引用 app.js，它将被加载到浏览器中，它将成为我们应用程序的起点。
除了这些文件，我们还有一个占位符，用于呈现 UI。在此示例中，我们有一个 id 为 whitespace 的 div，稍后我们将使用它来呈现 UI。
https://i.stack.imgur.com/qJ4vd.jpg
<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 模式中的代码的方法。如截图所示，我们有一个 ExtJS 应用程序的容器文件夹，在本例中为 app。此文件夹将包含拆分为各种文件夹的所有应用程序代码，即模型，视图，控制器，存储等。目前，它只有 app.js 文件。
https://i.stack.imgur.com/SY8gQ.jpg
第 5 步：在 app.js 中编写代码
App.js 是我们申请的起点; 对于此示例，我刚刚使用了启动应用程序所需的最低配置。
Ext.application 代表一个 ExtJS 应用程序，它可以执行多项操作。它创建了名称配置中提供的全局变量SenchaApp，所有应用程序类（模型，视图，控制器，存储）都将驻留在单个命名空间中。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'
});
}
});
输出截图
使用 Default.aspx 作为启动页面运行此 Web 应用程序时，浏览器中将显示以下窗口。
