[Ext JS 4] Extjs 它 initComponent 和 constructor差分
initComponent 和 constructor是什么
Extjs 提供的组件还是挺丰富的, 可是有时候需求更丰富。
当Extjs 原生的组件无法实现我们的要求的时候, 就须要扩展Extjs 的组件实现自制组件了。
除了这种使用状况, 有时候对于一些同样却有使用非常多的配置, 可能像把它独立出来,单独设为一种组件供大家调用, 节省开发时间和提高代码重用度。
initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。
Ext.define 实现扩展
在Extjs 中使用Ext.define来实现扩展, initComponent 和 constructor的使用方式相似
- Ext.define('Ext.oscar999.button.MyButton', {
- extend : 'Ext.button.Button',
- initComponent : function() {
- //do something
- },
- constructor : function() {
- //do something
- }
- });
一般状况上,加上 xtype 的定义, 相似:
aaarticlea/png;base64,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" alt="" />
(在旧的Extjs 版本号中使用 Ext.extend 实现扩展)
那么这两种使用方法到底该怎样使用? 两者的使用又有什么差别呢?
initComponent 和 constructor差别于联系
1. initComponent这种方法是在Ext.Component的构造函数(constructor)中调用的,仅仅有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法
看一下 Ext.AbstractComponent的源代码文件 src/AbstractComponent.js
在 constructor方法中调用了initComponent
aaarticlea/png;base64,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" alt="" />
2.
1)自己定义类中的 initComponent 函数中必须调用 callParent();否则 调用者无法初始化这个对象
2)针对button 这种扩展组件来说,自己定义类中的 constructor ,须要调用callParent( arguments);否则 调用者无法初始化这个对象
- this.callParent(arguments);
这里的arguments 是须要的。
(在Extjs 4 之前的版本号中。 可能会看到比較多的XXX.superclass.constructor.call 写法)
sencha 的官网中有一篇针对这两个差别的讨论:
只是语法是基于Extjs 3 来讨论的。 笔者认为作用不是非常大。
就笔者实际的开发经验来看, 基本上使用initComponent 这是可能实现的开发的要求。
[Ext JS 4] Extjs 它 initComponent 和 constructor差分的更多相关文章
- EXT JS认识EXTJS,第一个EXTJS例子
大部分内容转载自:http://blog.csdn.net/wanghuan203/article/details/8011112 和http://www.cnblogs.com/willick/p/ ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
- Ext JS 6应用程序Build后出现“c is not a constructor return new c(a[0])”的处理
概述 在对Ext JS 6的应用程序打包后,时不时会出现以下错误: 由于是压缩后出现的错误,要进行调试也无从下手,因而这个错误会令新手手足无措,不知道是怎么回事. 错误原因 造成该错误的主要原因是要创 ...
- 【转载】《Ext JS 4 First Look》翻译之一:新特性
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:^_^肥仔John 原文地址:http://www.cnblogs. ...
- 【翻译】Ext JS——高效的编码风格指南
原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字 ...
- Ext.js高级组件
第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...
- EXt js 学习笔记总结
1. get . fly. getCmp .getBody .getDoc .getDom.. get-----ExtJs获取节点.dom.提供缓存机制 Ext.Element类是Ext对DO ...
- 【转】EXT JS MVC开发模式
原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Applicat ...
- 【翻译】十大要避免的Ext JS开发方法
原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean Lanktree Sean ...
随机推荐
- C# WinForm 和 javascript进行交互 使用HTML做界面
01 using System; 02 using System.Collections.Generic; 03 using System.Text; 04 using System.Reflecti ...
- ioctl、文件操作接口函数以及nand的升级模式的操作过程详解
概述 内核中驱动文件的操作通常是通过write和read函数进行的,但是很多时候再用户空间进行的操作或许不是内核中公共代码部分提供的功能,此时就需要使用一种个性化的方法进行操作--ioctl系统调用. ...
- Canvas上绘制几何图形
重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...
- MSSQL - SqlDataAdapter连接数据库提高性能用法
SqlDataAdapter 与 SqlConnection 和 SqlCommand 一起使用,以便在连接到 SQL Server 数据库时提高性能. SqlDataAdapter 的这一实现自动打 ...
- 实现长按删除QListWidget的Item
原地址:http://blog.sina.com.cn/s/blog_5c70dfc80100r99u.html 要想长按删除QListWidget的Item,必须重写鼠标事件,所以需要继承QList ...
- Oracle 的一张表没有主键,如何映射Hibernate
我的一个Oracle表,没有任何主键,然后生成的时候就将所有的字段都作为联合主键,如果所有的字段都做联合主键的话,这样只要一个字段为null,查询的话这条记录就不能查询到. 然后我想到Oracle数据 ...
- A - Alignment of Code(推荐)
You are working in a team that writes Incredibly Customizable Programming Codewriter (ICPC) which is ...
- (Relax 数论1.6)POJ 1061 青蛙的约会(扩展的欧几里得公式)
/* * POJ_1061.cpp * * Created on: 2013年11月19日 * Author: Administrator */ #include <iostream> # ...
- Python 学习入门(21)—— 线程
本文介绍了Python对于线程的支持,包括“学会”多线程编程需要掌握的基础以及Python两个线程标准库的完整介绍及使用示例. 1. 线程基础 1.1. 线程状态 线程有5种状态,状态转换的过程如下图 ...
- JavaScript闭包(closure)入门: 拿"开发部"和"技术牛"举个例子
虽然只是一小段菜鸟的学习笔记 , 不过还是希望看到的高手看到不足的时候帮忙指点~ 一:代码和执行过程 /** * http://blog.csdn.net/ruantao1989 * ==>Ju ...