『ExtJS』01 008. ExtJS 4 组件扩展

本文将介绍如何使用你自己的component扩展ExtJS内建的component。

如何去做

---

在这里，我们将创建一个Ext.panel.Panel的扩展组件。

Language: JavaScript

Framework: ExtJS 4.1.1a

IDE: Excplise J2EE + Spket

1. 定义一个Ext.panel.Panel的子类

   Ext.define('Cookbook.DispalyPanel',{ extend:'Ext.panel.Panel' });

2. 重载Ext.panel.Panel的initComponent方法，并调用父类的initComponent方法

   Ext.define('Cookbook.DispalyPanel',{ extend:'Ext.panel.Panel',
   
   initComponent:function(){
       // call the extended class' initomponent method
       this.callParent(arguments);
   }
   
   });
   

3. 添加你自己的配置信息到initComponent方法中

   Ext.define('Cookbook.DispalyPanel',{ extend:'Ext.panel.Panel',
   
   initComponent:function(){
       // apply our configuration to the class
       Ext.apply(this,{
          title:'Display Panel',
          html:'Display some information here!',
          200,
          height:200,
          renderTo:Ext.getBody()
       });
   
       // call the extended class' initComponent method
       this.callParent(arguments);
   }
   
   });
   

4. 创建这个子类的实例

   var displayPanel = Ext.create('Cookbook.DisplayPanel'); displayPanel.show();

说明

---

1. 使用extend配置项告诉框架，我们要新建一个Ext.panel.Panel组件的子类；

2. 我们先在initComponent中添加我们自己的动作，最后使用callParent来调用父类的方法，以保证程序的顺利运行；

3. 使用Ext.apply方法来使我们的配置项生效。