create Custom Component and re use it - extjs

Question

i am new to ext, i want to create a custom component containing a form and use it by registering it as a xtype, where i want:
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

When i create my own Components i do this:
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
});
Then you can say:
Ext.widget('MyDialog').show();