使用 Ext JS 4 开发简单的 Hello world 程序
这个教程叫告诉你如何开始基于 Sencha Ext JS 4 开发程序，同时提供完整的教程源码和 3 个高清的视频讲解。
准备工作
你无需单独为 Sencha 安装开发环境，只需要有一个 Web 浏览器、Web 服务器和一个文本编辑器即可。我使用的是 Mac 机器和 Chrome 浏览器，使用 Mac 的 Web 服务器和 Komodo 编辑器，你可从 Sencha Getting Started 链接中获取如何安装环境的说明。
Hello World
一般我们在学习一种新语言或者技术时，都会编写一个 Hello World 程序来快速的了解语言的开发工作。在这个例子中，我们在 Hello world 基础上增加一些东西，我们添加一个 Viewport 组件、Sencha classpathing ，一个定制的超类和之类，以及一个 mixin 类的实例。
项目输出结果
该示例程序运行后的结果如下图所示，我同时使用桌面浏览器和手机浏览器来查看运行结果，Sencha 同时提供了 Sencha Touch，主要用来构建智能手机上的应用，但今天我们主要讲桌面版的 Ext JS。
调试：在 chrome 窗口中，通过 Chrome 内置的开发者工具 (Built-In View->Developer->Developer’s Tools) 可看到 Sencha Ext JS 的输出：
In Chrome on Mac
In iOS (Via Emulator)
项目文件结构
Sencha 在其官网文档中推荐一个文件夹结构如下：
入口
你可看到 index.html 加载了三个外部文件
<html> <head> <title>Hello World</title> <!-- STYLES --> <link rel="stylesheet" type="text/css" href="./libs/resources/css/ext-all.css"> <!-- LIBS --> <script type="text/javascript" src="./libs/ext-all-debug.js"></script> <!-- APP --> <script type="text/javascript" src="./app.js"></script> </head> <body></body> </html>
样式
我使用了在一些基本的教程中找到的默认的 CSS，没有做任何编辑工作。
ExtJS 的几种库文件
还有一些其他的选择，具有独特的优势。
如下：
- ext-all-debug-w-comments.js – 整个框架的调试版本，包含注释信息，该文件很大，占用更多的处理器资源
- ext-all-debug.js – 与上面文件相同，但是缺少注释，还是很大，但用于调试比较方便。
- ext-all.js – 包含整个框架并经过最小化处理，不支持调试，没有注释，产品环境中请使用该文件。
- ext-debug.js – 该文件提供最佳的调试体验，但也是最慢的。
- ext.js – ext-debug.js 经过压缩处理后的版本
App
app.js 文件是你定制代码的入口，你可以将你定制的代码放在 src 和 assets 文件夹中。在我的定制代码中，我展示了一些有趣的东西：
Components
我没有对 Sencha 组件库进行深入研究，但有很多好看的组件，包括：Accessibility, Grids, Charts, Tabs, Windows, Trees, Layout, Managers, Drawing, Drag and Drop, Toolbars, Menus, ComboBox, DataView, Forms, MVC 等等，这里有一个 ViewPort 的简单例子：
testSomeUI: function() { Ext.create('Ext.container.Viewport', { name : "viewPort2", layout: 'fit', items: [ { title: 'My Viewport', html : 'Hello World!' } ] }); }, Classpathing
Sencha 提供一种很好的方式将代码分开成为单独的类，并可将类存放于包中。所有包的根就是源码根路径。Classes/packages 可帮助你组织和调试（在断点位置可更清晰的显示问题所在）
首先，我指定了一个或者多个 classpaths:
Ext.Loader.setConfig({ enabled : true, paths : { com : "src/com" } }); 然后在主 app 中加载并使用某个类：
// SUPER CLASS var myBeer = Ext.create('com.rmc.projects.helloworld.Beer', 'Budweiser'); console.log ("myBeer.brandName: " + myBeer.brandName ); console.log (myBeer.drink()); // CHILD CLASS var myLightBeer = Ext.create('com.rmc.projects.helloworld.LightBeer', 'BudLight'); console.log ("myLightBeer.brandName: " +myLightBeer.brandName ); console.log (myLightBeer.drink()); // MIXIN // Because of 'MixinCheers.js' we can call 'cheers()' myLightBeer.cheers(); 我阅读了文档，知道这被称为“动态加载”类，可在需要的时候加载。由于 JavaScript 原生是不支持面向对象开发，但是在 Sencha 中却工作得很好：
这里是一个超类：
Ext.define('com.rmc.projects.helloworld.Beer', { // -------------------------------------- // Properties // -------------------------------------- brandName: 'Unknown', calories: 0, // -------------------------------------- // Constructor // -------------------------------------- constructor: function(brandName) { // SUPER // EVENTS // VARIABLES // PROPERTIES this.calories = 200; if (brandName) { this.brandName = brandName; } // METHODS // RETURN return this; }, // -------------------------------------- // Methods // -------------------------------------- drink: function() { return "The beer '"+ this.brandName+"' was drank. Calories : " + this.calories; } }); 然后是一个之类，扩展了超类：
Ext.define('com.rmc.projects.helloworld.LightBeer', { // -------------------------------------- // Properties // -------------------------------------- extend : "com.rmc.projects.helloworld.Beer", mixins: { ch: 'com.rmc.projects.helloworld.MixinCheers' }, // -------------------------------------- // Constructor // -------------------------------------- constructor: function(brandName) { // SUPER this.superclass.constructor.apply(this, [brandName]); // EVENTS // VARIABLES // PROPERTIES this.calories = 100; // METHODS // RETURN return this; }, // -------------------------------------- // Methods // -------------------------------------- }); 这里是一个 mixin 类，子类中使用：
Ext.define('com.rmc.projects.helloworld.MixinCheers', { // -------------------------------------- // Properties // -------------------------------------- // -------------------------------------- // Constructor // -------------------------------------- // -------------------------------------- // Methods // -------------------------------------- cheers: function() { console.log ("Cheers!"); }, }); Ext JS MVC 模板
如果你喜欢上面的 Hello world 例子，这里有一些更高级的东西。我的灵感来自于 Robotlegs MVC Templates （这是我为 AS3/Flex 创建的项目），今天我们使用同样的思路创建一个 Ext JS MVC 模板。
模板的目的是为了创建一个简单的、空的 MVC 应用，这个可以作为你新的 Ext JS 项目的基准。MVC 是 web 开发广泛使用的设计模式，这里的应用提供一个简单的 UI 包含 load 和 clear 按钮，load 按钮从 model 中加载数据并在 view 中显示，这是一个很简单的例子，但足以演示 Sencha Ext JS 中一些关键的概念。
Figure 1
Figure 2
结论
我很高兴有 Sencha Ext JS 这样的东西，该框架为 JavaScript 增加了更强大的功能，其样式系统也非常的灵活和可靠，组件看起来都很棒。