Sencha Touch 2.4 callParent() 用法


callParent() 用法

方法介绍

用来调用父类的同名方法,并传参,这在从一个框架类派生且要重写诸如onRender这样的方法时会经常看到。

传参方式

1.arguments

Ext.define('App.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    onRender: function (parentNode, index) {
        this.callParent(arguments);//调用父类的同名方法onRender(),并传参过去
} });

2.直接传参

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。

//父类
Ext.define('VehicleApp.vehicle.Vehicle', {
                                unit: "mph",
                                drive: function(speed) {
                                    console.log(this.$className + ": Vrrroom: " + speed + " " + this.unit);
                                }
});

//子类
Ext.define('VehicleApp.vehicle.Motor', {
    extend: 'VehicleApp.vehicle.Vehicle',

    config: {
        nrOfWheels: 2 //<1>
    },

    constructor: function (config) {
        this.initConfig(config); //<2>
    },

    drive: function(speed) { //<3>

        if(this.getNrOfWheels() < 3) { //<4>
            console.log(this.$className +
                ": Vrrroom, vrrroom on " + this.getNrOfWheels() +
                     " wheels.");
        } else {
            this.callParent( [60]); //调用父类的同名方法drive(),并传参过去,是个数组,里面放了一个60
        }
    }
});

转自:http://extjs.org.cn/node/721

@落雨
ae6623.cn

时间: 2024-09-01 06:36:20

Sencha Touch 2.4 callParent() 用法的相关文章

Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介

Carousels 组件 Carousels,翻译过来"传送带"的意思,顾名思义,仿佛屏幕背后就有一传送带,用户发出向左或向右的指令,即可命令传送带"移动".移动设备上的屏幕就是当前显示的内容.在中间的那个"一点点"图案即为指示器,指示器可以告诉你剩余有多种张待现实的页面. 与其他组件那样,Carousels 可适用于水平或垂直的方向.下面例子将建立一个简单的水平方向的 Carousels 组件: Ext.create('Ext.Carousel

sencha touch 模仿tabpanel导航栏TabBar的实例代码_javascript技巧

基于sencha touch 2.2所写 代码: 复制代码 代码如下: /**模仿tabpanel导航栏*/Ext.define('ux.TabBar', {    alternateClassName: 'tabBar',    extend: 'Ext.Toolbar',    xtype: 'tabBar',    config: {        docked: 'bottom',        cls: 'navToolbar',        layout: {           

Sencha Touch跨域问题解决

之前对于跨域问题仅有粗浅的认识,一般是浏览器层面出于安全性的考虑,不允许调用其他页面的对象.这次在Sencha Touch中解决这个问题额外花掉不少时间. 解决的方法大概就是: 修改服务器的header: JsonP.JsonP方法是一种非官方的解决方案,只支持Get方法,需要服务器端根据callback参数返回不同的内容.返回的内容不是标准的json格式,对服务器端的改动会比较麻烦.我选择了修改服务器返回的header的方法. 1. 修改header的Access-Control-Allow-

sencha touch dataview 数据加载问题

问题描述 sencha touch dataview 数据加载问题 在使用sencha touch时遇到个问题.dataview 控件第一次加载数据能显示,第二次加载数据无法显示,这时我随便点一下界面任意一个控件(不执行任何操作)这时数据又显示出来了... 查阅了很多资料都没解决. 解决方案 http://blog.sina.com.cn/s/blog_6158283f0100uep4.html

sencha touch在google浏览器中出现的问题?

问题描述 sencha touch在google浏览器中出现的问题? 使用的google chrome 22 滚动条滚动时,文字下方会出现部分文章一直卡在那里.但是google chrome 30就不会出现,怎么在不换浏览器的情况下.解决这个问题.

sencha touch2.0和sencha touch 2.1的区别在哪

问题描述 sencha touch2.0和sencha touch 2.1的区别在哪 sencha touch 2.1能兼容sencha touch 2.0所有的方法吗

关于sencha touch 中build时出现的错误

问题描述 关于sencha touch 中build时出现的错误 大神帮忙看看,新建的项目,build时出现这个错误,我真的看不懂呀.初学者.

如何用Sencha Touch打包Android的APK

什么是Sencha Touch 前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch.Raphaël库,推出适用于最前沿Touch Web的Sencha Touch框架,该框架是世界上第一个基于HTML5的Mobile App框架.同时,ExtJS更名为Sencha,JQTouch的创始人David Kaneda,以及Raphaël的创始人也已加盟Sencha团队.(摘自Bing Knows) 通过Sencha Touch可以快速开发跨平台移动应用,无

前端是Sencha Touch+ Cordova(转)

从13年初开始,我的关注点一直在两个点上,一个是股票,一个是移动前端和大数据技术,互联网金融的发展会让互联网证券越来越火热,当然,我也希望将这两个关注点结合到一起,做一些事情.   现在,我的APP和微信公众号已经上线,每天下班都会花一个多小时的时间在他们的开发上,每天白天脑子里基本都在想,怎么去改进.完善.还能做哪些有意义的新功能,然后晚上把代码写出来,这期间不仅有技术上的补充,还包括对股市投资的一些知识补充,我老婆说我已经着了魔了,陪她出来逛街时都不在状态..   随着对股票投资的理解,我的