文档章节

Ext JS - Hello World

Big_BoBo
 Big_BoBo
发布于 2014/06/05 11:16
字数 1998
阅读 102
收藏 0

WELCOME TO EXT JS

这个向导提供了一个基本的Ext JS介绍。我们将会以一个非常简单的“hello world”例子来展开讨论。我们将以code是如何在Ext JS中组织的来开始。这个向导同时也包含了许多其他有价值的资源,所以尽可能多看几次以保证你成功的入门Ext JS!

Hello World

开始使用Ext JS5是非常简单的!像如下展示的一样简单地创建一个index.html 文件其中引用的JavaScript 和CSS文件都是从我们的CDN引入的:

<!DOCTYPE html>
<html>
    <head>
        <title>Editor Preview</title>
        <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/beta/ext-5.0.0.736/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
        <script type="text/javascript" src="http://cdn.sencha.com/ext/beta/ext-5.0.0.736/build/ext-all.js"></script>      
        <script type ="text/javascript" src="app.js"></script>
    </head>
    <body></body>
</html>

其他如jQuery或者 AngularJS涉及描述性的HTML标记,Ext JS使用了不同的方法。你要写特定的JavaScript和组织我们的内部类型系统。你可以参考我们下面的代码结构例子。

Ext.create('Ext.Panel', {
     renderTo     : Ext.getBody(),
     width        : 200,
     height       : 150,
     bodyPadding  : 5,
     title        : 'Hello World',
     html         : 'Hello <b>World</b>...'
 });


让我们合并上面的Panel对象到你包含到index.html文件头中的空白app.js文件中。现在,如果你简单的增加上面的代码到script表单集中,它会失败因为Extjs框架并没有完全加载。所以我们必须使用Application Class’s launch() 函数。它会使框架就绪来使用。

我们需要做的就是把上面的代码放入到Ext.app launch() 函数中。

app.js文件最后将会看起来这样:

Ext.application({
    name   : 'MyApp',

    launch : function() {

       Ext.create('Ext.Panel', {
            renderTo     : Ext.getBody(),
            width        : 200,
            height       : 150,
            bodyPadding  : 5,
            title        : 'Hello World',
            html         : 'Hello <b>World</b>...'
        });

    }
});


当你刷新你的页面的时候,你将会看到Panel显示:
 
 
这个例子说明开始使用Ext JS5有多么容易。这里充满了无限的可能!你可以通过许多例子查看Ext JS5的能力。他们为框架的工具盒能力提供了一个非常详细的介绍。

ext-all.js

你得注意 在index.html中引入的 ext-all.js 和 ext-theme-neptune.css包含了整个Ext JS框架。这在实验环境是合适的,但是你将会需要编译一个框架的子集来用于生产环境。这会创建一个更小更迷你的基本的Ext JS依赖文件仅仅包含了你需要的类。
 
你可以查看 开始向导 来更彻底的了解如何使用 Ext JS 5 和 Sencha Cmd 创建一个应用。
 
继续阅读更多关于Ext JS5的核心内容。

What is Ext JS?

Ext JS 5 是一个提供你全部工具来创建一个跨平台应用的JavaScript应用框架。Ext JS5支持所有的现在浏览器,从IE8到最新的Chrome和所有其中间的版本。
 
Ext JS 5 是一个面向对象的,类型为基础的类库,这意味着它允许你的应用适应从一个人到一整个公司团队。让我们细分一些概念,万一你不熟悉这些技术也可以很容易的理解。

Object Oriented Programming

面向对象编程(OOP)是一个模块化的,可重复使用的方式建立你的代码的方法。它同时也使你的代码比许多其他的使用单文件编写的 js类库具有更好的可维护性。

相比于编写一个巨大的程序,一个程序可以被拆分成许多可连接的部分,最终,使一切变的更容易来维护和伸缩。

阅读更多关于basics of OOP.

Classes and Objects

OOP的关键概念包含了类和对象。一个类是一个应用中元素的抽象定义。这是一个基本等级“物”的简单的抽象。这个类也许接着会被实例化成一个对象。同时,这个对象包含了这个抽象类的所有信息,还有其他拓展的部分。
 
让我们创建另一个例子来演示Ext JS的类型系统。我们将同样以 index.html 和 app.js 文件开始。
 
我们会定义一个类来代替创建一个对象。
 
我们像下面一样自定义一个面板:
Ext.define('MyApp.MyPanel', {
            extend : 'Ext.Panel',
            title  : 'Hello World',
            html   : 'Hello <b>World</b>...'
        });
正如你看到的,我们定义了一些东西叫做‘My Panel’,它拓展了Ext JS的Panel 类,Ext.Panel。现在我们可以使用这个来当做模板来创建一个新的MyApp.MyPanel实例。
 
也许我们需要两个面板,它们之间唯一的差别只有 里面的文本内容。我们可以创建两个My Panel的实例和分别配置不同的 文本内同和html配置。你在app.js中的代码看起来会是这样的:
Ext.define('MyApp.MyPanel', {
            extend      : 'Ext.Panel',
            width       : 200,
            height      : 150,
            bodyPadding : 5
        });

        Ext.application({
            name   : 'MyApp',

            launch : function() {

                Ext.create('MyApp.MyPanel', {
                    renderTo :Ext.getBody(),
                    title    : 'My First Panel',
                    html     : 'My First Panel'
                });

                Ext.create('MyApp.MyPanel', {
                    renderTo : Ext.getBody(),
                    title    : 'My Second Panel',
                    html     : 'My Second Panel'
                });
            }
        });

像我们看到的那样,这个功能让你重用的基本的代码但是仍然可以创建你需要的改变。这只是一个简单的例子,拓展Ext JS 类是一个帮助你创建干净和可维护的代码的非常强大的机制。

你可以阅读更多关于我们的内部类型系统。

注意:这里的单文件组织代码的方式只是为了举个例子。如果你想要写一个真正的应用,你必须把你的视图层放在不同的MyApp.view.MyPanel文件中,你的创建动作要放置在controller或者launch()方法中。

阅读更多关于应用架构 here.

Beyond Hello World

你已经看到在Ext JS中创建一个简单的“hello world”例子所需要的代码。如果你是个新手,可能需要你稍微的了解下它的语法来创建这样简单的东西。就是说,让我们看看Ext JS中的grid,你可以看到真实的情况下,利用少量的语法来创建真正令人印象深刻的输出

在这里例子,我们将产生一个Ext.grid.Panel,其中包含了行内编辑和一组数据。为了看到这个例子,用下面的代码简单的替换app.js文件中的代码:

Ext.application({
    name   : 'MyApp',

    launch : function() {

        Ext.widget({
            renderTo : Ext.getBody(),
            xtype    : 'grid',
            title    : 'Grid',
            width    : 650,
            height   : 300,
            plugins  : 'rowediting',
            store    : {
                fields : [ 'name', 'age', 'votes', 'credits' ],
                data   : [
                    [ 'Bill', 35, 10, 427 ],
                    [ 'Fred', 22, 4, 42 ]
                ]
            },
            columns: {
                defaults: {
                    editor : 'numberfield',
                    width  : 120
                },
                items: [
                    { text: 'Name', dataIndex: 'name', flex: 1, editor: 'textfield' },
                    { text: 'Age', dataIndex: 'age' },
                    { text: 'Votes', dataIndex: 'votes' },
                    { text: 'Credits', dataIndex: 'credits' }
                ]
            }
        })
    }
});

然后我们刷新浏览器,将会看到:

你这里看到的是一个全功能的Ext JS grid。这个grid有可排序的,可拖拽的,可移动的列。这些列可以通过grid头上的下拉菜单的列选项来显示和隐藏。这个grid同时也包含了一个可以通过双击任何列来激活的列编辑器。这些列包含带帮助和友好的用户交互的可编辑的数字和文件行。

真正令人激动的事事你用大约30行的代码就获得了这些。大多数这些功能都是grid默认提供的,意味着更少的时间来获得更多的功能。唯一添加到这个例子的就是行编辑器,而这也只需要一行配置而已。

这应该能说明一旦你熟悉了语法Ext JS能节约你多少时间。最后,你节约了时间并且用户在你的应用里获得了丰富的体验。

注意:在一个真实世界的例子中,你将使用分离的store和model来填充你的grid数据。

阅读更多关于 Ext.data.Store 和 Ext.data.Model 在我们的应用向导中.

Next Steps

现在你已经看到开始这一切是多么简单,你可以重读一些我们的向导了更加了解Ext JS

你可以再这里找到 Ext JS 5 的文档here.

 

© 著作权归作者所有

共有 人打赏支持
Big_BoBo
粉丝 53
博文 54
码字总数 22137
作品 0
杭州
高级程序员
[翻译]Ext JS 教程-开始使用 ExtJS 4

入门 1. 需求 1.1 网页浏览器 ExtJS 4 支持所有主流的浏览器,从IE 6 到最新的谷歌Chrome。在开发期间,我们建议你使用下面这些浏览器,以获得更好的调试体验。 Ø Google Chrome 10+ Ø Ap...

LeoXu
2013/05/30
0
3
eclipse+spket+Extjs4.2.1开发环境搭建

一、开发工具配置 1、http://www.eclipse.org/downloads/下载Eclipse,解压。 2、http://spket.com/download.html下载Plugin,解压后覆盖到Eclipse的目录。 3、启动Eclipse,选择window→pro...

南風
2014/08/20
0
0
V8 - 2 - Getting Started 新手导读

Getting Started 新手导读 This document introduces some key V8 concepts and provides a hello world example to get you started with V8 code. 这篇文章介绍一些关于V8的概念的关键,以......

死章鱼啦
2011/03/29
0
0
JavaScript特殊字符替换及替换全部字符串

JavaScript特殊字符替换及替换全部字符串 1.替换所有要替换字符 <script type="text/javascript"> var str = "$Hello World!$Hello World!$Hello World!"; //把所有的“Hello World!”替换为......

爱coding
2012/07/25
0
0
extjs2.0/3.4 入门教程以及一些例子

前言 有本资料叫extjs简易实用教程,讲得很棒,是初学者的福音——比起官方普遍较复杂的examples,这个教程更靠谱。而且虽说是2.x的教程,但同样适用于3.x——4.x就不知道了。 只是,有些问题...

itwriter
2014/02/25
0
5

没有更多内容

加载失败,请刷新页面

加载更多

20.27 分发系统介绍~ 20.30 expect脚本传递参数

分发系统介绍分发系统-expect讲解(也就是一个分发的脚本)场景:业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者lnmp,最好还需要吧代码上传到服务器上;但是因...

洗香香
17分钟前
1
0
设计一个百万级的消息推送系统

前言 首先迟到的祝大家中秋快乐。 最近一周多没有更新了。其实我一直想憋一个大招,分享一些大家感兴趣的干货。 鉴于最近我个人的工作内容,于是利用这三天小长假憋了一个出来(其实是玩了两...

crossoverJie
23分钟前
1
0
软件架构:5种你应该知道的模式

Singleton(单例模式)、仓储模式(repository)、工厂模式(factory)、建造者模式(builder)、装饰模式(decorator)……大概每个上课听讲的程序员都不会陌生——软件的设计模式为我们提供...

好雨云帮
35分钟前
2
0
OSChina 周二乱弹 —— 这只是一笔金钱交易

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《暮春秋色》- 窦唯 / 译乐队 《暮春秋色》- 窦唯 / 译乐队 手机党少年们想听歌,请使劲儿戳(这里) @我没有抓狂:跨服聊...

小小编辑
47分钟前
405
14
df命令、du命令 、磁盘分区

9月25日任务 4.1 df命令 4.2 du命令 4.3/4.4 磁盘分区 4.1、命令 :df #磁盘空间使用情况 [root@zgxlinux-02 ~]# df 按字节显示 1000Byte=1KB 1000KB=1MB 1000MB=1GB ...

zgxlinux
55分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部