[ExtJS5学习笔记]第四节欢迎来到extjs5-手把手教你实现你的第一个应用

2022-02-03 05:11:36

本文作者：sushengmiyan

-------------------------------------------------------------------------------------------------------------------

翻译来源：http://docs.sencha.com/extjs/5.0.0/getting_started/welcome_to_extjs.html

--------------------------------------------------------------------------------------------------------------------

这篇指引提供了一个简单的ext js介绍，我们会从讨论建立一个简单的hello world例子开始我们的体验。我们会接着讲解在extjs中代码是怎样的结构，这个指导同样也会包括一些其他可以使用的资源的链接，所以，你应该尽可能的多看一些来提升你对ext的认知程度。

helloworld

----------------------

来体验ext js 5很简单,我们先创建一个文件夹，将ext5包放入（下载地址：http://download.csdn.net/detail/sushengmiyan/7701943），再创建一个简单的html文件,建立如下的目录结构,如图：

我们命名的index.html的内容如下：

<html>
    <head>
        <title>Welcome to Ext JS!</title>
       <link rel="stylesheet" type="text/css" href="ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
       <script type="text/javascript" src="ext-5.0.0/build/ext-all.js"></script> 
       <script type="text/javascript" src="ext-5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

        <script type ="text/javascript" src="app.js"></script>
    </head>
    <body></body>
</html>

像jQuery或者AngularJS囊括了html的声明标记，但是ext js不是这样，你只需要在我们内部类辅助系统和js中书写就够了。你可以看到像如下结构的例子：

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

现在讲上述代码嵌入到你的app.js文件中，在index.html同级目录下新建app.js内容粘贴上去即可。

如果你现在刷新页面，你可能无法看到运行结果，因为现在框架还没有被完全加载。这就是为什么我们需要在应用程序中增加launch()函数，这个函数是当页面准备结束的时候就被调用。

现在我们给app.js内容替换为如下：

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

在IE8中运行有提示错误，但是在chrom中完全可以，看到如下结果：

这个例子说明了开始ext js 5是多么简单，从这里，天空是你的极限。你可以探索ext js 5的许多功能通过研究我们的例子，它们给出了框架工具盒能力的伟大介绍。

ext-all.js

----------

我们应该注意到，index.html中ext-all.js和ext-them-neptune.css是被完全包含进来的，这个对于我们练习来说是合适的，但是当你想只用框架的部分来发布应用程序的时候就不太适合了。你可以根据你的工程的需要来简化你的框架。

你可以参考 getting started guide 来获取更多的关于这方面的extjs5和sencha cmd 的介绍。

请继续阅读关于extjs5的核心。

什么是extjs

------------------------

Ext JS 5是一个JavaScript应用程序框架,它为您提供了一整套工具用于创建跨平台的应用程序。Ext JS 5支持所有现代浏览器,IE8的最新版本以及Chrome和介于两者之间的。

Ext JS是面向对象的、基于类库的,这意味着它的设计允许您的应用程序范围从单个开发人员到多团队的企业。让我们打破这些概念的一些你不熟悉的术语。

面向对象编程

面向对象编程(OOP)是一个模块化的方式设置为可重用的代码,使碎片。这也使代码更易于维护比常见的“内联”脚本编码与许多其他JavaScript库。
而不是使一个巨大的项目,说计划可以分为连接部分,最终,会让事情更容易维护和规模。
阅读更多关于面向对象编程的基础知识。

类和对象

OOP的关键概念包括类和对象。一个类是一个抽象的定义应用程序的一个组件。这是一个简单的抽象基础水平的“东西”。这个类可以作为表示类的对象实例。在这一点上,抽象的对象包含的所有信息,除了任何其他部分的扩展。

现在我们开始另一个例子来展示extjs的类系统，我们还是从上述的index.html和app.js开始。

我们先来定义一个类：我们定义一个panel类如下：

Ext.define(
   'MyApp.MyPanel',
  {

     extend : 'Ext.Panel',

     title  : 'Hello World',

     html   : 'Hello <b>World</b>...'

   });

你可以看到，我们定义了一个东西叫做MyPanel，它继承于ext js panel类现在我们可以使用这个模板来创建一个新的对象。

或许我们需要两个面板，他们之间的唯一区别就是内容不一样，我们就可以创建两个实例，现在你的app.js内容应该像下面这样：

Ext.define(
   'ExtJSTest.MyPanel',
  {

     extend : 'Ext.Panel',

     title  : 'Hello World',

     html   : 'Hello <b>World</b>...'

   });

Ext.application({
	name: "ExtJSTest",
	launch: function(){
		
      Ext.create('ExtJSTest.MyPanel', {
        renderTo     : Ext.getBody(),
        title        : 'MyFirst Panel',
        html         : 'MyFirst Panel'
      });
      Ext.create('ExtJSTest.MyPanel', {
          renderTo     : Ext.getBody(),
          title        : 'MySecend Panel',
          html         : 'MySecend Panel'
      });      
  }
});

刷新index.html可以看到如下效果：

如你所见，这可以让你重复使用一段基代码，但是也可以达到我们不同的需要。虽然这是一个简单的例子,使用和扩展Ext JS类是一个非常强大的机制,将帮助您创建清洁和可维护的代码。
你可以阅读更多关于我们班的内部系统。
注意:这个方法是“嵌入”例如目的。如果你写一个真正的应用程序中,您会MyApp.view.MyPanel视图在一个单独的文件。此外,在控制器中创建语句会或发射()函数。
你可以在这里阅读更多关于应用程序体系结构。

比helloWorld更深一层

----------------------------------------------

你现在已经看到了我们创建helloworld的例子，如果你对sencha 框架式不熟悉的话，它可能看起来像稍微正常语法,你可能需要创建一些那么简单的东西。让我们看看网格,这样你可以看到最真实的情况下如何利用少量的语法来创建真正令人印象深刻的输出。

在这个例子中,我们会产生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网格。这个网格包含可排序的可移动的列也是可拖放的。这些列可以利用网格头下的列选项的下拉菜单显示和隐藏。这个网格还包含一行通过双击激活任何行的编辑器。这些行包含可编辑的文本字段和一个有用的和有吸引力的用户界面。
真正神奇的事情是,你得到这个在大约30行代码。这种功能带有网格在默认情况下,这意味着更少的时间添加功能。唯一的添加到这个示例是行编辑器,它只需要一行配置被添加到您的网格。

这应该说明一旦你熟悉语法Ext JS可以节省你多少时间。最后,你节省时间和用户与应用程序功能丰富的经验。

注意:在一个真实世界的例子,您将使用一个单独的存储和模型来填充你的网格数据。
你可以在我们的应用程序架构指南中阅读更多关于Ext.data.store和Ext.data.model

下节内容：

--------------------

既然你已经看到了启动是如此的简单，那么你就可以看一些比较高深的知识了。

你可以在如下地址找到extjs的doc文档：http://docs.sencha.com/extjs/5.0.0/

下一步我们就要学习：

1.set up and geting started

2.the class system

3.layouts and containers

4.enwents in ext js

5.examples

码农公寓

helloworld

什么是extjs

比helloWorld更深一层

下节内容：

相关文章