zoukankan      html  css  js  c++  java
  • 【翻译】Ext JS最新技巧——2014-8-13

    原文:Top Support Tips


     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文件夹使用适当的命名空间来定义重写:

    1. 添加override配置项并将重写类作为它的值。在示例中,要重写的是Ext.panel.Panel。
    2. 添加要重写的功能,这需要确保所有的相关部分。在当前示例,只是修改了close功能,让它输出一个控制台信息。如果创建一个面板并调用它的close方法, 将会在控制台看到信息“My Change to Close”。
    3. 注意:在重写方法内,如果需要调用基类的同名方法,就需要调用this.callParent方法。
    4. 还可以添加新的功能。正如你所知道的,在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。

    如果有任何问题,请访问论坛


  • 相关阅读:
    Window 服务安装
    SQL
    vb To c# or c# To vb
    CacheHelper-缓存
    让Linq的OrderBy支持动态字段
    哪些列上适合建立索引???
    如何查看Oracle数据库中无效的对象,约束,触发器和索引
    如何查看Oracle中被锁定的表
    ORACLE ASM
    WebLogic Server
  • 原文地址:https://www.cnblogs.com/muyuge/p/6333657.html
Copyright © 2011-2022 走看看