create Custom Component and re use it

Question

hi all,

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]; }