原文：
本教程将帮助你学习使用Sencha Ext JS 4。在文章最后附有完整的源代码和3个高清视频。
开始之前
使用本教程，需要为Sencha配置开发环境，包括一个浏览器、Web服务器和文本编辑工具（或代码IDE）。我使用的是Chrome浏览器、Mac的Web服务器和komodo编辑器。在Sencha的里有这些工具的安装说明。
应用开发之HelloWorld
通常，程序是在屏幕上或发布（或编译）上做没有错误的演示（如文本）的最快途径。在这篇文章中，会添加一些东西，如Sencha组件（Viewport）、Sencha类路径（src）、自定义超类、自定义子类以及一个混合类示例（类似多重继承）。
项目效果
以下是应用示例运行后的效果，一个是在桌面浏览器的效果，一个是iOS（通过苹果iOS模拟器）的效果。Sencha还提供了Sencha Touch用于移动开发，不过今天的焦点是桌面框架——Ext JS。
调试：很明显，在Chrome窗口的底部使用了Chrome自带的开发者工具（菜单：视图->开发者->开发者工具），而且Ext JS的效果很好。
项目文件结构
虽然在Sencha入门文档有一个可选的推荐文件结构，不过本示例将采用以下结构：
切入点
在index.html中加载了3个外部文件：
Hello World
样式文件
示例将使用Ext JS的默认样式，而且没有添加或删除任何样式。
库文件
这里有几个Ext JS文件可供选择，使用那一个根据应用特点权衡后，只使用其中一个就可以了。
以下是每个文件的说明：
- ext-all-debug-w-comments.js：整个框架的带注释的调试版本。这是最大的一个文件。需要浏览器花更多时间去加载并显示。
- ext-all-debug.js：与上面的文件功能一样，但没有注释。文件也很大， 但在开发调试阶段使用相当合适。
- ext-all.js：整个框架的合成和压缩版本。该文件不适合用于调试，只用于系统发布。
- ext-debug.js：该文件只包含了Ext JS的基础架构。使用该文件，可以使用Ext JS的远程加载实现按需加载，提供最好调试体验。不过，要权衡一下性能。
- ext.js：ext-debug.js的压缩版本。
应用文件
app.js文件是自定义代码的切入点。自定义代码还可以放到src文件夹和assets文件夹。在自定义代码中，有一些非常炫的事。
组件
在示例中没有深入探讨Sencha的组件库，虽然它有很多很好看的组件。这些组件都易于使用，如Grid、图表、标签、窗口、树、布局管理、画图、拖放、工具栏、才对你、下拉列表框、数据视图、表单、MVC等等。示例使用了最简单的Viewport组件（基本上是一个100%*100%的画布，在里面可以放置面板或其它东西）。
testSomeUI: function() { Ext.create('Ext.container.Viewport', { name : "viewPort2", layout: 'fit', items: [ { title: 'My Viewport', html : 'Hello World!' } ] });}, 类路径
Sencha有一个很好的方法来划分类代码，并将类打包。包的根目录就是源文件夹（或是Adobe Flex习惯的classpath）。类/包有助于组合和调试（断点和错误会清楚显示错误所在）。
首先，定义一个或多个类路径：
Ext.Loader.setConfig({ enabled : true, paths : { com : "src/com" }}); 然后在主app中加载或使用类： // SUPER CLASSvar myBeer = Ext.create('com.rmc.projects.helloworld.Beer', 'Budweiser'); console.log ("myBeer.brandName: " + myBeer.brandName );console.log (myBeer.drink()); // CHILD CLASSvar 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(); 在读到的文章中，这以处理被称为“动态加载”类。从Flex角度来看，它是很强大，就象在使用Flex一样。类可以根据需要加载，并在程序中运行。因为Javascript本身不支持OOP开发，而所有的HTML5框架都要求开发者使用一些模仿OOP的框架公约，在这方面，Sencha Ext JS做得相当不错。 以下是超类的代码：
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 // -------------------------------------- }); 以下是用于子类的混合类代码： Ext.define('com.rmc.projects.helloworld.MixinCheers', { // -------------------------------------- // Properties // -------------------------------------- // -------------------------------------- // Constructor // -------------------------------------- // -------------------------------------- // Methods // -------------------------------------- cheers: function() { console.log ("Cheers!"); }, }); Ext JS MVC模版
如果喜欢上面的“Hello World”的例子，下面有更好的东西。以“”一文中使用AS3/Flex项目创建的内核，创建了一个Ext JS MVC模板。
为这个简单的MVC应用示例创建（或演变为）一个模板可谓是灵光一闪。这样，它就可以作为所有MVC项目的起点。MVC是一种流行的方法用于分离模型（数据）、书体（用于界面）和控制器（当单击用户界面时要做什么）。应用中有yield简单界面，包括“加载（load）”和“清除（clear）”按钮。视图中的加载按钮（下图）会通知控制器从模型中加载数据到视图。“清除”操作作用类似（图2）。这是一个很基本的应用，展示了Sencha Ext JS的关键概念。
图1
图2
小结
看到Sencha的Ext JS很开心。它以一个伟大的方式添加到Javascript框架，样式系统非常灵活和强大，组件观感非常好。