Ext JS - Hello World

时间 2019-11-21

原文原文链接

WELCOME TO EXT JS

这个向导提供了一个基本的Ext JS介绍。咱们将会以一个很是简单的“hello world”例子来展开讨论。咱们将以code是如何在Ext JS中组织的来开始。这个向导同时也包含了许多其余有价值的资源，因此尽量多看几回以保证你成功的入门Ext JS！ javascript

Hello World

开始使用Ext JS5是很是简单的！像以下展现的同样简单地建立一个index.html 文件其中引用的JavaScript 和CSS文件都是从咱们的CDN引入的： css

<!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和组织咱们的内部类型系统。你能够参考咱们下面的代码结构例子。 html

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() 函数。它会使框架就绪来使用。 java

咱们须要作的就是把上面的代码放入到Ext.app launch() 函数中。编程

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

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. app

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.

1. 01. Node js Hello world
2. hello world
3. Hello World
4. Hello Python，Hello world
5. ExtJS5学习之Hello World
6. JQuery - Hello World
7. Hello world
8. Hello world!
9. hello world ！
10. Hello World !!!
更多相关文章...
• Docker Hello World - Docker教程
• Thymeleaf扩展2(Say Hello) - Thymeleaf 教程
• JDK13 GA发布：5大特性解读
• YAML 入门教程