使用 Ext JS 4 开发简单的 Hello world 程序

红薯 发布于 2012/06/24 08:25
阅读 14K+
收藏 49

这个教程叫告诉你如何开始基于 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 的输出:

Screenshot
In Chrome on Mac

Screenshot
In iOS (Via Emulator)

项目文件结构

Sencha 在其官网文档中推荐一个文件夹结构如下:

Screenshot

入口

你可看到 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 中一些关键的概念。

Screenshot
Figure 1

Screenshot
Figure 2

结论

我很高兴有 Sencha Ext JS 这样的东西,该框架为 JavaScript 增加了更强大的功能,其样式系统也非常的灵活和可靠,组件看起来都很棒。

资源

英文原文OSCHINA原创翻译

加载中
0
坐定定
坐定定
ext js 4 先把速度提到和3.0一样再说吧
0
piaohao
piaohao
收费的东西,用了一段时间,后来改用easyui了
0
泡不烂的凉粉
泡不烂的凉粉
<?php echo 'hello world.'; ?>
小紫羽
小紫羽
嘿嘿,客户端怎能如此呢
0
景愿
景愿
这目录结构是maven的嘛..js也搞这么多目录
勇敢善良坚强的小海豚
勇敢善良坚强的小海豚
没用过MAVEN吧。。。
0
yuzhouliu
yuzhouliu

引用来自“buguozheng”的答案

收费的东西,用了一段时间,后来改用easyui了
这两个各有优势
0
wellyao
wellyao
红薯大哥应该没有机会用这玩意儿吧
0
piaohao
piaohao

引用来自“yuzhouliu”的答案

引用来自“buguozheng”的答案

收费的东西,用了一段时间,后来改用easyui了
这两个各有优势
能否说说他们的优势?除了ext比easyui健壮,easyui简洁且开源免费之外
山哥
山哥
easyui也只是一般般吧。
0xAB
0xAB
EasyUI1.2.6现在开始已经使用商业授权协议了。开始收费了 并且,从Google Code SVN下来的1.2.5的源代码,存在问题,不能完全协同运行(个人测试,测试方法:先检查运行效果,然后与已经压缩了的比对代码,发现的问题)、
0
紫海龟
紫海龟
Viewport这个默认布局在不同的显示分辨率下,体验相当的烂。
0
Sunny
Sunny
用了一年多ExtJS
Sunny
Sunny
回复 @颜佳伟 : 看头像就认识了,是宝哥
颜佳伟
你是。。。。。。柳哥?
0
yuzhouliu
yuzhouliu

引用来自“buguozheng”的答案

引用来自“yuzhouliu”的答案

引用来自“buguozheng”的答案

收费的东西,用了一段时间,后来改用easyui了
这两个各有优势
能否说说他们的优势?除了ext比easyui健壮,easyui简洁且开源免费之外
都让你说了
返回顶部
顶部