创建自定义组件，并重新使用它

Question

我是新来的内线，我想创建一个包含表单自定义组件，通过注册它作为一个的xtype，在这里我想用它：

MyComponent = Ext.extend(Ext.FormPanel, { 
initComponent: function() { 
    Ext.apply(this, { 
     labelWidth: 50, 
     // label settings here cascade unless overridden 
     items: [{ 
      xtype: 'label', 
      text: 'Name' 
     }, 

     { 
      xtype: 'textfield', 
      label: 'First Name', 
      name: 'firstname', 

      id: 'firstname', 
      allowBlank: true 
     }, 
     { 
      xtype: 'label', 
      text: 'Last Name', 
      style: { 
       'color': 'black', 
       'font-size': '10px' 
      } 
     }, 
     { 
      xtype: 'textfield', 
      label: 'lastname', 

      name: 'lastname', 
      id: 'lastname' 
     }, 
     { 
      xtype: 'label', 
      text: 'Teams' 
     }, 
     { 
      xtype: 'button', 

      text: 'Save', 

      handler: function() {}, 
      id: 'save', 
     }, 
     { 
      xtype: 'button', 
      text: 'cancel', 
      handler: function() { //Ext.Msg.alert('Status', 'Changes saved successfully.'); 
       Ext.example.msg(' Click', 'You cancelled'); 
      } 
     } 
     ] 
    }); 
    MyComponent.superclass.initComponent.apply(this, arguments); 
}, 
onRender: function() { 
    MyComponent.superclass.onRender.apply(this, arguments); 
} 
}); 

Ext.reg('mycomponentxtype', MyComponent); /* paste in your code and press Beautify button */ 
if ('this_is' == /an_example/) { 
    do_something(); 
} else { 
    var a = b ? (c % d) : e[f]; 
} 

Answer 1

当我创建我自己的组件，我这样做：

Ext.define('MyApp.view.dialog.MyDialog', { 
    'extend' : 'Ext.window.Window', 
    'alias' : 'widget.MyDialog',//declare xour own xtype here 
    'title' : 'My Dialog', 
    'items' : [{ 
     'xtype' : 'textfield', 
     'fieldLabel' : 'Surename', 
     //other config here 
    }] // other items here 
}); 

然后你就可以说：

Ext.widget('MyDialog').show();