Ext JS最新技巧

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