Ext JS.4.0：动态加载和新的类系统(countDown of Extjs4.0: Dynamic Loading and New Class System)

今天，我们很高兴发布了一系列全新的功能在Ext JS 4。在接下来的几个星期，我们将推出我们Ext JS的beta版本 - 包的包装。虽然我们原本计划推出一个完整的beta现在，有些部分的框架已经稳定较预期缓慢，所以我们将要推出的包，而不是增量。今天，我们开始全新的Ext JS的4类系统。

JavaScript有没有它自己的类，它可以使一个陌生的环境，新的语言。Ext JS的一直提供自身的一类系统利用语言的强大的原型模式，而更传统的面向对象的方法使开发人员能够编写代码。用Ext JS 4中，我们采取的类系统到一个新的水平了一 ​​系列的新功能，使您的开发更容易，更灵活。内线4将推出四个新的功能-类定义，混入，为配置的getter和setter方法，以及依赖负荷。上面的插图突出一些我们班制度，最显着的可拖动和resizable成为混入的好处。

类定义

为了比较，让我们来看看我们如何使用创建一个新的类在Ext JS 3。在这个例子中，我们创建了一个虚构的登录窗口类，扩展Ext.Window：

//Ext JS 3.x class definition
MyApp.LoginWindow = Ext.extend(Ext.Window, {
    title: 'Log in',
 
    initComponent: function() {
        Ext.apply(this, {
            items: [
                {
                    xtype: 'textfield',
                    name : 'username',
                    fieldLabel: 'Username'
                },
                ...
            ]
        });
 
        MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
    }
});

 

这可能是对你最熟悉的，它工作得很好，但它也有一些缺陷。Ext.Window没有定义，当我们创建的类，我们会得到一个错误，我们的应用程序可能会崩溃。同样，如果没有定义MyApp命名空间的，我们也希望得到一个错误。这些问题都解决了用新的方式来定义一个类：

//Ext JS 4.x class definition
Ext.define('MyApp.LoginWindow', {
    extend: 'Ext.Window',
 
    title: 'Log in',
 
    initComponent: function() {
        Ext.apply(this, {
            items: [
                //as above
            ]
        });
 
        MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
    }
});

 

用Ext JS 4类可以被引用的字符串的名字，这意味着我们从来没有得到上面的错误。类的经理是聪明足够的检查Ext.Window是否已经定义了，如果没有推迟创造MyApp.LoginWindow的，直到它已被定义。我们不再需要保持严格的负载为了在我们的应用程序，允许框架打理一切。

混入

这虽然仅仅是个开始 - 新的类系统也带来了一系列Ext JS的类的新功能。其中第一项是另外混入的框架。混入定义可重用套，可'混在'一类的行为和配置。为了充分利用这一新功能在你的类，简单地套用在你的类的定义。例如，使类可拖动，混合在可拖动混入。可应用于任何数量的混入一类，这使得他们一个伟大的方式来得到多重继承 - 的东西，长期以来一直难以实现与大多数JavaScript框架。混入可以像这样定义的：

 
Ext.define('Sample.Musician', {
    extend: 'Sample.Person',
 
    mixins: {
        guitar: 'Sample.ability.CanPlayGuitar',
        compose: 'Sample.ability.CanComposeSongs',
        sing: 'Sample.ability.CanSing'
    }
});
 

 

再次，所有的类名称所引用的字符串，所以我们没有得到任何错误，如果我们使用的混入不加载页面上。一个类可以接收任意数量的混入和每个混入，因为这可以是简单的：

 
Ext.define('Sample.ability.CanPlayGuitar', {
    playGuitar: function() {
        //code to play 
    }
});

 

自动setter和getter配置

在Ext JS中的大部分类通过配置选项，可定制。通常情况下，这些配置选项可以修改和查询在运行时使用getter和setter方法​​。这些都必须维护和批量添加到库中。Ext JS的4自带的配置选项，这些功能为您自动创建一个特殊的命名约定。这样可以节省开发时间，确保了一致的API，并减少了对下载文件的大小显着。让我们来看一个例子：

 
Ext.define('MyClass', {
    config: {
        title: 'Default Title'
    }
});
 

 

在这里我们设置一个单一的配置选项：标题类来接收。我们还提供了一个默认值，标题，在这种情况下，“默认标题。Ext JS的4类新定义，新的getter和setter函数被自动创建。在Ext JS 3.3，我们不得不手动创建此样板代码：

 
MyClass = Ext.extend(MyBaseClass, {
    title: 'Default Title',
 
    getTitle: function() {
        return this.title;
    },
 
    resetTitle: function() {
        this.setTitle('Default Title');
    },
 
    setTitle: function(newTitle) {
       this.title = this.applyTitle(newTitle) || newTitle;
    },
 
    applyTitle: function(newTitle) {
         //custom code here
    }
});
 

 

所有四个以上的功能现在由框架自动生成。在许多情况下，更新变量是不够的，但有时我们更改配置时，我们要采取一些特殊的措施。例如，如果我们的新类标题显示在一个DOM元素，我们可以告诉它来更新该元素定义像这样：

Ext.define('MyClass', {
   extend: 'MyBaseClass',
 
    config: {
        title: 'Default Title'
    },
 
    applyTitle: function(newTitle) {
        Ext.get('titleEl').update(newTitle);
    }
});
 

 

所有这些功能都自动生成的，我们可以覆盖任何人一样容易，我们做了上述applyTitle。这不仅节省你写了很多代码在自己的类，它也显着减少了Ext JS的和您的应用程序的大小，这意味着一个较小的文件下载为您的用户。

动态加载

我们已经看到了在短短几年的新类系统提供的好处 - 有更多的，我们稍后会覆盖。但现在是时候引入一些全新的Ext JS的动态加载。Ext JS的每一个版本，到目前为止，你已经在使用它之前，必须加载整个框架。如果你想创建一个Ext.Window，它必须已经或下载，你会得到一个错误。在Ext JS 4 dynaming加载的所有更改。像这样简单：

 
Ext.require('Ext.Window', function() {
    new Ext.Window({
        title : 'Loaded Dynamically!',
        width : 200,
        height: 100
    }).show();
});
 

 

在这里，我们问Ext JS的加载Ext.Window类，然后调用一个函数时，它加载。大家可以根据需要任意数量的类，通过传递一个数组来Ext.require的。这只是工作 - 这是很容易的，但真正神奇的是在幕后。Ext JS的动态加载程序是纯粹的客户端 - 它不需要服务器端安装。更重要的是，它会自动加载的类的任何依赖解析。作为一个例子，比方说Ext.Window看起来像这样：

Ext.define('Ext.Window', {
    extend: 'Ext.Panel',
    requires: ['Ext.util.MixedCollection'],
    mixins: {
        draggable: 'Ext.util.Draggable'
    }
});

Ext JS中只要加载Ext.Window类，它的数字扩展中列出的依赖，需要和混入类中声明。如果这些都是不存在的页面上，它会获取它们之前，首先定义Ext.Window类。装载机自动知道如何找出一种简单的约定的基础上为每个类的文件名。在这种情况下，以下文件将被加载之前，我们的函数被调用：

• src / Window.js的
• src / Panel.js的
• SRC / UTIL / MixedCollection.js的
• SRC / UTIL / Draggable.js的

Loader是递归-如果这些文件有任何依赖性，是不是已经满足，直到一切都存在，它会保持加载文件。虽然你应该避免采取在生产中的一个文件，文件的方法，这是非常有用的解决Ext JS的发展历史最悠久的刺激-使用分机的所有将debug.js。到现在为止，我们已经建议使用分机将debug.js生产发展和ext-all.js。调试文件包含整个框架以可读的格式，但长超过60,000行。这可以使难以调试的问题-一个堆栈跟踪，告诉你是个例外，上线47657分机全将debug.js是不是特别有帮助。使用动态加载程序，问题将被报告的src /数据/ JsonReader.js的的56线，为每个文件完整的堆栈跟踪和正确的行号。这是一个巨大的一步，当它涉及到调试你的应用程序，它执行得非常好，在本地发展的同时，也很难知道框架被动态加载。装载机还提供死锁检测，并可以用来加载文件同步和异步。如果不吸引你，不要担心-新类系统是完全向后兼容。Ext.extend创建你的老班仍然可以工作，我们将继续创建的ext-all.js文件，其中包含整个框架。

现场演示

我们已经准备了一个非常简单的为您现场演示实验，并把它放在网上。开始简单的例子稍微复杂，因为他们的提前。完整的示例，可以下载一个zip文件，并在本地运行，在那里你可以尝试使用自己的代码-所有你需要的是一个Web服务器来提供文件。新类系统的基础是大规模增强框架Ext JS的4。每类重要的框架已经升级到更快，更强大和更容易地开发。在接下来的几个星期，我们将引入一个包的进步在同一时间，我们将继续我们的倒计时到Ext JS的4。本周晚些时候看看惊人的新的数据包Ext JS的4。