【翻译】Ext JS 4之HelloWorld

kouriba

浏览: 1030651 次

最近访客更多访客>>

chuasong

346260722

xld800

likeblood

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1342)

社区版块

存档分类

2012-08 ( 191)
2012-07 ( 187)
2012-06 ( 102)
更多存档...

本教程将帮助你学习使用Sencha Ext JS 4。在文章最后附有完整的源代码和3个高清视频。

开始之前

使用本教程，需要为Sencha配置开发环境，包括一个浏览器、Web服务器和文本编辑工具（或代码IDE）。我使用的是Chrome浏览器、Mac的Web服务器和komodo编辑器。在Sencha的入门文档里有这些工具的安装说明。

应用开发之HelloWorld

通常，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文件可供选择，使用那一个根据应用特点权衡后，只使用其中一个就可以了。

以下是每个文件的说明：

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 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!");
    },
 
 
});

Ext JS MVC模版

如果喜欢上面的“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框架，样式系统非常灵活和强大，组件观感非常好。

资源

<footer class="author_info" style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px !important; margin-left: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: transparent; display: block; clear: both; text-align: left; color: rgb(143, 143, 143); font-style: normal; font-family: 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-position: initial initial; background-repeat: initial initial; "><div class="columns two" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: transparent; overflow: hidden; position: relative; background-position: initial initial; background-repeat: initial initial; "><div class="auto_column" style="margin: 0px; padding: 0px 25px 0px 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: transparent; float: left; width: 292px; background-position: initial initial; background-repeat: initial initial; ">作者：<strong>Samuel Asher Rivello</strong><br> Samuel Asher Rivello is the principal of Rivello Multimedia Consulting (RMC), which offers services including software architecture, consulting, development and training. Sam has 12 years experience with the Flash Platform. He is an Adobe Flex Champion whose skills and experience transfer well to HTML5 based frameworks such as Sencha.<br> </div></div></footer>

分享到：

Unity3D研究院之与Android相互传递消息（ ... | 六月。写篇文章凑个数

2012-06-23 14:48
浏览 796
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论