ExtJS提供的组件非常丰富,不过当原生的组件无法满足要求时,就需要扩展原生自定义组件了。

  initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。

  在Extjs 中使用Ext.define来实现扩展, initComponent 和 constructor的使用方式类似:

 Ext.define('My.panel.Panel', {
extend : 'Ext.panel.Panel',
initComponent : function() {
//do something
},
constructor : function() {
//do something
}
});

  一般状况上,加上 xtype 的定义, 类似:

 Ext.define('My.panel.Panel', {
extend : 'Ext.panel.Panel',
xtype: 'myPanel',
initComponent : function() {
//do something
},
constructor : function() {
//do something
}
});

  initComponent这个方法是在Ext.Component的构造函数(constructor)中调用的,只有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法。

  自定义类中的 initComponent 函数中必须调用 callParent();否则 调用者无法初始化这个对象。

  针对button 这样的扩展组件来说,自定义类中的  constructor ,需要调用callParent( arguments);否则 调用者无法初始化这个对象。

  在下面的例子中:

 Ext.define('My.form.Panel',{
extend: 'Ext.panel.Panel',
xtype: 'form-panel', title: 'form-panel',
width: 400,
height: 300, defaultType: 'textfield', items: [{
allowBlank: false,
fieldLabel: 'Name:',
name: 'name',
emptyText: 'Name ID'
},{
allowBlank: false,
fieldLabel: 'Password:',
name: 'password',
emptyText: 'password',
inputType: 'password'
},{
xtype: 'checkbox',
fieldLabel: 'Sex',
}],
buttons: [{
text: 'OK'
},{
text: 'Cancel'
}], constructor: function(){
this.renderTo = Ext.getBody();
this.callParent(arguments);
Ext.Msg.alert('constructor','Constructor!');
}, initComponent: function(){
Ext.Msg.alert('InitComponent','InitComponent!');
var me = this;
me.defaults = {
anchor: '100%',
labelWidth: 100 };
me.callParent(); }, beforeRender: function(){
Ext.Msg.alert('beforRender','beforerender!');
this.callParent();
}
}) Ext.onReady(function(){
Ext.create('My.form.Panel').show(); })

  对容器的renderTo一般写在constructor中,如果写在initComponent中,则配置对象为容器内的几个组件。

  而对于容器内的几个组件的默认配置,则一般写在initComponent内。

  通过分别在constructor、initComponent、beforeRender中加入输出语句实验发现,三者的调动顺序为constructor --> beforeRender --> initComponent。

  通过对ExtJS的生命周期的了解,在初始化阶段,首先调用了构造器constructor,一般从  Component 继承下来的类并不需要提供(通常没有提供)一个独立的构造器。然后是各种事件的创建以供各组件的调用,随后是 ComponentMgr 中注册组件实例,从而可以通过 Ext.getCmp 被获得实例引用,然后调用initComponent 方法,这是一个最重要的初始化步骤,它是做为一个模板方法,子类可以按需要重写这个方法。最后呈现阶段, 如果有配置 renderTo 或 applyTo,组件会马上被呈现输出,否则,它会被延迟输出,直
到组件被显式调用显示,或被它的容器所调用输出。而beforeRender是在组件渲染 rendered之前触发,一般扩展的新组件与元素的初始化配置,就写在beforeRender内。

【ExtJS】关于constructor、initComponent、beforeRender的更多相关文章

  1. [Ext JS 4] Extjs 它 initComponent 和 constructor差分

    initComponent 和 constructor是什么 Extjs 提供的组件还是挺丰富的, 可是有时候需求更丰富. 当Extjs 原生的组件无法实现我们的要求的时候, 就须要扩展Extjs 的 ...

  2. ExtJS4中initComponent和constructor的区别

    Ext的define方法参数类型define( String className, Object data, Function createdFn ) 创建自定义类时,先构造(constructor) ...

  3. 解决ExtJs Uncaught TypeError: c is not a constructor错误

    ExtJs项目使用sencha app build编译以后,浏览时很容易抛出Uncaught TypeError: c is not a constructor的错误,而且会加载没有名称的js,例如 ...

  4. ExtJS关于组件Component生命周期

    extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个 ...

  5. 【ExtJS】关于Component生命周期

    很久以前就学习过extjs的组件生命周期,很久之后,再回头看一看,又增加好多新的认识. extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有 ...

  6. ExtJS笔记5 Components

    参考 :http://blog.csdn.net/zhangxin09/article/details/6914882 An Ext JS application's UI is made up of ...

  7. ExtJs MVC应用架构示例

    项目目录结构 (源码)2. app.js Ext.Loader.setConfig({ enabled : true, paths : { 'Ext' : 'extjs', 'App' : 'app' ...

  8. 在开发 ExtJS 应用程序常犯的 10 个错误

    这是 CNX 公司在开发 ExtJS 项目中总结的需要特别注意的 10 个地方.有时候,我们完全是自己使用 ExtJS 从零开始构建的新的应用程序,但有时候我们的客户会要求我们使用他们自己的代码,并且 ...

  9. ExtJS学习(一)Ext自定义类实现

    工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了.以后回忆起来也方便. 首先下载extjs官网地址:http://extjs.org.cn/ 下载以后的目录结构: 先写一个入门的程序吧自定义 ...

随机推荐

  1. 20145218PC平台逆向破解

    20145218PC平台逆向破解 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同 ...

  2. C# -- 泛型(2)

    通过前面的文章我们知道“泛型”是个“形容词”,并且了解了 “泛型类” 和 “泛型数组” ,下面我们来看看泛型的其它的使用方式. 上一篇:C# -- 泛型(1) <1>.泛型方法 上一篇文章 ...

  3. windows phone制作引导页

    适用于WP7 WP8+ 源码下载撸这里 制作动画gif小软件下载 小技巧 ①图片是纯色背景:将页面设置跟图片背景一样颜色 ②图片是渐变or其他,切图时候:单独切背景(页面设置这个为背景)跟图片里面元素 ...

  4. Ubuntu16.04切换python3和python2

    切换Python3为默认版本: sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo ...

  5. SQL/T-SQL实例参考-2

    对多关联查询,查询多中的记录,但是返回一的结果集 子查询语法 --一对多关联查询,查询多中的记录,但是返回一的结果集 SELECT C.* FROM ( SELECT A.BasicID FROM [ ...

  6. xcode工程配置绝对路径与相对路径

    1.问题描述 一般我们在xcode里面配置包含工程目录下头文件的时候,都要关联着相对路径和绝对路径,如果只是自己用这个项目,用绝对路径的问题不大,但是如果你把工程发给别人,别人就要在改这个绝对路径,这 ...

  7. vi—终端中的编辑器

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...

  8. c++多线程基础4(条件变量)

    条件变量是允许多个线程相互交流的同步原语.它允许一定量的线程等待(可以定时)另一线程的提醒,然后再继续.条件变量始终关联到一个互斥 定义于头文件 <condition_variable> ...

  9. 【bzoj5093】 [Lydsy1711月赛]图的价值 组合数+斯特林数+NTT

    Description "简单无向图"是指无重边.无自环的无向图(不一定连通). 一个带标号的图的价值定义为每个点度数的k次方的和. 给定n和k,请计算所有n个点的带标号的简单无向 ...

  10. 【spring cloud】源码分析(一)

    概述 从服务发现注解 @EnableDiscoveryClient入手,剖析整个服务发现与注册过程 一,spring-cloud-common包 针对服务发现,本jar包定义了 DiscoveryCl ...