原文:http://www.sencha.com/blog/helloworld-with-ext-js-4/
本教程将帮助你学习使用Sencha Ext JS 4。在文章最后附有完整的源代码和3个高清视频。
使用本教程,需要为Sencha配置开发环境,包括一个浏览器、Web服务器和文本编辑工具(或代码IDE)。我使用的是Chrome浏览器、Mac的Web服务器和komodo编辑器。在Sencha的入门文档里有这些工具的安装说明。
通常,Hello World程序是在屏幕上或发布(或编译)上做没有错误的演示(如文本)的最快途径。在这篇文章中,会添加一些东西,如Sencha组件(Viewport)、Sencha类路径(src)、自定义超类、自定义子类以及一个混合类示例(类似多重继承)。
以下是应用示例运行后的效果,一个是在桌面浏览器的效果,一个是iOS(通过苹果iOS模拟器)的效果。Sencha还提供了Sencha Touch用于移动开发,不过今天的焦点是桌面框架——Ext JS。
调试:很明显,在Chrome窗口的底部使用了Chrome自带的开发者工具(菜单:视图->开发者->开发者工具),而且Ext JS的效果很好。
虽然在Sencha入门文档有一个可选的推荐文件结构,不过本示例将采用以下结构:
在index.html中加载了3个外部文件:
- <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>
示例将使用Ext JS的默认样式,而且没有添加或删除任何样式。
这里有几个Ext 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 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();
在读到的文章中,这以处理被称为“动态加载”类。从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!");
- },
- });
如果喜欢上面的“Hello World”的例子,下面有更好的东西。以“Robotlegs MVC Templates”一文中使用AS3/Flex项目创建的内核,创建了一个Ext JS MVC模板。
为这个简单的MVC应用示例创建(或演变为)一个模板可谓是灵光一闪。这样,它就可以作为所有MVC项目的起点。MVC是一种流行的方法用于分离模型(数据)、书体(用于界面)和控制器(当单击用户界面时要做什么)。应用中有yield简单界面,包括“加载(load)”和“清除(clear)”按钮。视图中的加载按钮(下图)会通知控制器从模型中加载数据到视图。“清除”操作作用类似(图2)。这是一个很基本的应用,展示了Sencha Ext JS的关键概念。
图1
图2
看到Sencha的Ext JS很开心。它以一个伟大的方式添加到Javascript框架,样式系统非常灵活和强大,组件观感非常好。