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.

来源：oschina

链接：https://my.oschina.net/u/919487/blog/272917

标签

extjs5