Ext JS最新技巧

Posted 周五, 08/15/2014 - 11:52 by admin

Greg Barry：新的框架、 新的文档类型（Doctype）


在Ext JS 5，只支持IE8+，因此不再古力用户使用严格的HTML文档类型。现在，推荐使用HTML 5的文档类型，而且还推荐使用X-UA-Compatible作为meta标记以确保IE不会激活“兼容模式”，因为该模式不支持Ext JS。

以下代码片段展示了用于Ext JS 5的理想的文档类型和HEAD：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

在《Ext JS 5指南》中的新功能介绍中可以找到有关这方面的更详细的信息。

Greg Barry：仔细检查重写

重写是一个非常有用的用来扩展或改变核心类功能的工具，而且无需修改框架的源代码。Ext JS 4.1提供了一种新的方式用来创建这些框架的重写。在Ext JS 4和Ext JS 5的基本原则内，新的基于声明的重写的效果相当好。这些重写可以被放置在Sencha Cmd创建的overrides文件夹内，Cmd会自动将overrides文件夹内的重写包含在内，例如，如果使用了Ext.grid.Panel，就可以在overrides/grid/文件夹内创建一个名为Panel.js的文件，当bootstrap通过sencha app build、sencha app watch或sencha app refresh更新后，该文件就会被自动包含在bootstrap。

这种重写方法可以在整个框架的内部代码风格内看到。实际的内部重写示例包括：主题、本地化、RTL和更多。

尽管如此，还是可以看到一些从Ext JS 3就被纳入到应用程序的重写被应用在新的框架中。当将这些重写应用到新的应用程序价格，这可能在创建时产生时序问题。

创建重写的首选方式如下：

Ext.define('MyApp.overrides.panel.Panel', {
    override: 'Ext.panel.Panel',
    close: function() {
        console.log('My Change to Close');
        this.callParent(); // call the original method
    },
    helloWorld: function(){
        console.log('Hello World');
    }
});

下面来重温一下语法：

首先，要根据应用程序的overrids文件夹使用适当的命名空间来定义重写：

  • 添加override配置项并将重写类作为它的值。在示例中，要重写的是Ext.panel.Panel。
  • 添加要重写的功能，这需要确保所有的相关部分。在当前示例，只是修改了close功能，让它输出一个控制台信息。如果创建一个面板并调用它的close方法， 将会在控制台看到信息“My Change to Close”。
  • 注意：在重写方法内，如果需要调用基类的同名方法，就需要调用this.callParent方法。
  • 还可以添加新的功能。正如你所知道的，在Ext.panel.Panel内并没有“helloWorld”方法。然而，这可以通过重写来添加它。现在，创建一个面板，并调用panel.helloWorld方法，将会输出信息“Hello World”。

正如你所见到的，重写是一个强大的，可在应用程序中用来自定义框架的工具。如果还一直在使用Ext JS 3方式的重写，请对他们进行大修。

可以在这里越多到更多有关的定义机制。

Don Griffin：callParent()，一点建议


callParent是Sencha类系统（在Ext JS和Sencha Touch经常会见到）提供的一个方法，用来调用基类的同名方法。这在从一个框架类派生且要重写诸如onRender这样的方法时会经常看到。在一个带有参数的方法内调用callParent方法时，有两种方式来将这些参数传递给基类的方法。可以像以下代码哪样使用简便的arguments关键字：
Ext.define('App.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    onRender: function (parentNode, index) {
        this.callParent(arguments);
    }
});

又或者，可以显式的将这些参数作为数组直接量传递：

onRender: function (parentNode, index) {
    this.callParent([ parentNode, index ]);
}

这看上去没有区别，不过，在使用Sencha Cmd 5新的优化对callParent进行优化的时候，性能的改进会变得很明显。在启用了优化的时候，这两个方法会被优化为以下代码：

onRender: function (parentNode, index) {
    Ext.panel.Panel.prototype.onRender.apply(this, arguments);
}
 
onRender: function (parentNode, index) {
    Ext.panel.Panel.prototype.onRender.call(this, parentNode, index);
}

在第二种情况下，优化会使用Javascript函数的call方法来替代apply方法。要避免使用arguments。这两种方式毫无疑问都是高性能的方式。事实证明要尽量避免创建数组直接量。显然，在启用了优化后的代码中性能是最至关重要的地方，因而值得使用显示数组来代替arguments。

如果有任何问题，请访问论坛。

作者: Sencha Team
原文: http://www.sencha.com/blog/top-support-tips-august-2014

译者: 黄灯桥
译文: http://blog.csdn.net/tianxiaode/article/details/38553657

  • 要发表评论，请先登录