在写拓展组件之前，我们先要搞清楚“插件”（Plugin）和“组件”（Component）的区别。（引用自其它博客：http://blog.csdn.net/jerrysbest/article/details/6655417）

  • 一个扩展就是一个新名字出现的一个新类，它是以某个基类为基础，属于类库中的一员。扩展必须好像其他类那样实例化般地使用。
  • 插件被插入到现有的某个类之中，可灵活地移除，它可以在类库中定义，然后伴随某个类实例化的时候参与运作。

好，就拿一个extend xtype"compositefield"为例：

 

 
  
  1. FaxPhoneCompositeField = Ext.extend(Ext.form.CompositeField,{ 
  2.     initComponent: function() { 
  3.         Ext.apply(this,{ 
  4.         items:[ 
  5.         { 
  6.             xtype     : 'textfield', 
  7.             flex     : 1 
  8.         },{ 
  9.             xtype: 'displayfield', 
  10.             value: '-', 
  11.         }, 
  12.         { 
  13.             xtype     : 'textfield', 
  14.             flex      : 1 
  15.         },{ 
  16.             xtype: 'displayfield', 
  17.             value: '-' 
  18.         }, 
  19.         { 
  20.             xtype     : 'textfield', 
  21.             flex      : 1 
  22.         } 
  23.             ], 
  24.         labelWidth: 220 
  25.         }); 
  26.         FaxPhoneCompositeField.superclass.initComponent.apply(this); 
  27.     } 
  28. }); 
  29.  
  30. Ext.reg('FaxPhoneCompositeField',FaxPhoneCompositeField); 
 
  
就这样子就定义了一个xtype为“FaxPhoneCompositeField”的拓展组件
 
  
然后我们可以在我们的其他地方使用它：
 
  
 
 
  
 
 
  
 
  
  1. Ext.onReady( 
  2. function(){ 
  3. var f=new Ext.form.FormPanel({ 
  4. title:"test", 
  5. width:600, 
  6. height:150, 
  7. bodyStyle:"padding:6px", 
  8. labelAlign:'left', 
  9. layout:'form', 
  10. frame:true, 
  11. items: [{ 
  12.     xtype: 'FaxPhoneCompositeField', 
  13.     id:'phone', 
  14.     fieldLabel: 'Fax', 
  15. }] 
  16. }); 
  17.  
  18. f.render(Ext.getBody()); 
 
  
 
 
  
效果如下：