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

本文将介绍如何使用你自己的component扩展ExtJS内建的component。 如何去做 在这里，我们将创建一个Ext.panel.Panel的扩展组件。 Language: Java

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

如何去做

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

Language: JavaScript

Framework: ExtJS 4.1.1a

IDE: Excplise J2EE + Spket

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

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

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

      1: Ext.define('Cookbook.DispalyPanel',{ extend:'Ext.panel.Panel',

      2: 

      3: initComponent:function(){

      4:     // call the extended class' initomponent method

      5:     this.callParent(arguments);

      6: }

      7: 

      8: });

      9: 

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

      1: Ext.define('Cookbook.DispalyPanel',{ extend:'Ext.panel.Panel',

      2: 

      3: initComponent:function(){

      4:     // apply our configuration to the class

      5:     Ext.apply(this,{

      6:        title:'Display Panel',

      7:        html:'Display some information here!',

      8:        width:200,

      9:        height:200,

     10:        renderTo:Ext.getBody()

     11:     });

     12: 

     13:     // call the extended class' initComponent method

     14:     this.callParent(arguments);

     15: }

     16: 

     17: });

     18: 

4. 创建这个子类的实例

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

说明

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

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

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