【翻译】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文件夹使用适当的命名空间来定义重写:
添加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。
如果有任何问题,请访问论坛。
转载于:https://blog.51cto.com/dqhuang/1539813
【翻译】Ext JS最新技巧——2014-8-13相关推荐
- 【翻译】Ext JS最新技巧——2015-8-11
原文:Top Support Tips Seth Lemmons:使用棒极了的Awesome Font Ext JS 6附带了一个新的海卫一主题,可以使用Font Awesome字体作为背景图像的图标 ...
- ext get id js_【翻译】Ext JS最新技巧——2015-8-11
Seth Lemmons:使用棒极了的Awesome Font Ext JS 6附带了一个新的海卫一主题,可以使用Font Awesome字体作为背景图像的图标.不过,你知道如何通过"ico ...
- 翻译 - EXT JS 5:Controlling an Application with Router
最近做管理后台苦于前端样式,遂想学习在Ext,继而从新发布的5下手,英语水平有限,且翻且纠结着,欢迎指正. 原文:http://docs.sencha.com/extjs/5.0.0/applicat ...
- 《深入浅出Ext JS》(第2版)即将上市
<深入浅出Ext JS>(第2版)将于5月初上市.在此非常感谢各位购买和阅读本书第1版的广大读者,感谢大家对本书的关注,及阅读后给予本书的中肯评论.同时感谢,本书改版之前,积极参与图灵组织 ...
- 【翻译】对于Ext JS 5,你准备好了吗?
原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...
- 【翻译】将Ext JS Grid转换为Excel表格
原文:Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物--Ext JS Grid转为Excel代码,现在支持Ext JS 5! 功能包括: - ...
- 【翻译】如何创建Ext JS暗黑主题之一
原文:How to Create a Dark Ext JS Theme– Part 1 概述 我是不是都要演示我的Spotifinder Ext JS应用程序.它是一个很酷的应用程序,可连接到Las ...
- Sencha Cmd 6 和 Ext JS 6 指南文档(部分官方文档中文翻译)
近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档 ( ...
- 【翻译】Sencha Ext JS 5发布
原文:Announcing Sencha Ext JS 5 简介 我代表Sencha和整个Ext JS团队,很自豪的宣布,在今天,Sencha Ext JS 5发布了.Ext JS 5已经迈出了一大步 ...
最新文章
- 除了 iOS 和 Android,世界第三大移动系统是什么?
- 全国信息化工程师院校IT双证书职业课程认证
- Cache超清晰逻辑详解----不一致性(待更)
- 循环斐波那契数列_每日一课 | 斐波那契数列的第n个项
- 利用坐标变换证明惯性主轴方向是惯性矩的极值方向
- Spring Security系列之Spring Social实现微信社交登录(九)
- C盘100G不够,如何用D盘(或者E、F)空间给C盘扩容?
- 【Excel自动化办公Part3】:工作表的创建、删除、复制和修改名称,冻结窗格,添加筛选
- 为什么RGB 与 CMYK的差异,会有所不同?
- Navicat外键设置
- 【Algorithm】Prim
- 二极管、三极管、晶闸管基本知识
- linux及林纳斯-托沃兹
- 静态html页面如何兼容pc和移动端
- 大学生计算机技能应用大赛含金量,计算机设计大赛含金量
- BCG 对话框表格控件CBCGPGridCtrl(不包含子)
- 每日访问量统计的一种实现
- 解决 Docker容器因 iptables无法启动的问题
- STM32F4移植STemWin
- 数据结构初探--什么是数据结构?