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. window7 Oracle卸载步骤

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务(或 运行 services.msc) 停止所有Oracle服务.2. 开始->程序-& ...

  2. Head First HTML与CSS、XHTML (中文版).(Elisabeth Freeman) PDF扫描版​

    面对那些晦涩的html书你不禁要问:“难道要成为专家之后才能读懂这些?”那么,你应该选择<head first html与css.xhtml(中文版)>真正来学习html.这本书对你来说, ...

  3. Jquery queue实例

    $(function () { var queueList = [ function () { $("div").animate({ height: 80, top: 40 }, ...

  4. T-SQL查询进阶--SQL Server中的事务与锁

    为什么需要锁 在任何多用户的数据库中,必须有一套用于数据修改的一致的规则,当两个不同的进程试图同时修改同一份数据时,数据库管理系统(DBMS)负责解决它们之间潜在的冲突.任何关系数据库必须支持事务的A ...

  5. 649. Dota2 Senate

    In the world of Dota2, there are two parties: the Radiant and the Dire. The Dota2 senate consists of ...

  6. JSP页面导出PDF格式文件

    JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ ...

  7. 运行Scrapy工程,报错ModuleNotFoundError: No module named 'win32api'解决方法

    1.运行爬虫scrapy crawl name,报错ScrpyModuleNotFoundError: No module named 'win32api' 2.解决方法: 在https://gith ...

  8. I/O(输入/输出)---序列化与反序列化

    概念: 序列化就是将对象的状态存储到特定的介质中的过程,也就是将对象状态转换为可保持或传输格式的过程. 反序列化则是从特定存储介质中将数据重新构建对象的过程.可以将存储在文件上的对象信息读取,然后重新 ...

  9. (Keil) Debug & Simulation 操作

    0x00 printf在MCU環境下print debug error message,利用Logic Analyzer模擬MCU register or GPIO狀態. 若是要要使用printf函數 ...

  10. 创建React工程

    下载 main.jsBundle 包curl http://localhost:8081/index.ios.bundle -o main.jsbundle <!DOCTYPE html> ...