博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【翻译】Ext JS最新技巧——2014-8-13
阅读量:5983 次
发布时间:2019-06-20

本文共 2378 字,大约阅读时间需要 7 分钟。

原文:

 Greg Barry:新的框架、 新的文档类型(Doctype)

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

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

    

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

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。
如果有任何问题,请访问。

转载地址:http://eseox.baihongyu.com/

你可能感兴趣的文章
linux中fork()函数详解
查看>>
从1G到5G,46年屏幕变迁下,富士康、苹果、三星、华为的浴火重生路 ...
查看>>
用flash测试你的ircd
查看>>
白话红黑树系列之二——红黑树的构建
查看>>
客户的一张表中出现重复数据,而该列由唯一键约束,重复值如何产生的呢?...
查看>>
MySQL5.6中新增特性、不推荐使用的功能以及废弃的功能
查看>>
OnePlus安装Kali-NetHunter
查看>>
JavaScript:Array 对象
查看>>
PDFCreator:一款免费,开源的PDF(Tiff,pcx,png,jpeg,bmp,PS,EPS)打印机(VB,GPL),并提供了COM接口,方便使用各种编程语言调用...
查看>>
Note 1773479 - SYB: Displaying multiple triggers per object
查看>>
联手云计算核心技术开发,BoCloud与中科院软件所战略合作
查看>>
2017年背景下的SSD选购技巧有哪些变化?
查看>>
2016年的数据存储和管理的成本将何去何从?
查看>>
Airpods 并非无用,而是苹果借助语音交互布局物联网的新“棋子”
查看>>
项目总结:数据迁移测试
查看>>
SQL中存储过程的创建和使用
查看>>
荷兰政府:保证不强制在任何产品中留有后门
查看>>
编写单元测试的10条理由
查看>>
LINUX-SAMBA服务配置
查看>>
图像处理------光束效果
查看>>