grid and form in a same view extjs mvc

Question

I need to attach both form and grid on a same view, but unable to do this...How can i extend both.

Ext.grid.Panel

and

Ext.form.Panel

My view code is like...

Ext.define('CustomerService.view.customer.AfterAddingTemplate',{
extend:'Ext.grid.Panel',
alias:'widget.aftertemplate',
requires:['Ext.form.Panel','Ext.grid.Panel'],
id:'afteraddingtemplate',
store:'StockCategoryStore',
autoResizeColumns:true,
//layout:'fit',
columnLines:true,
stripeRows:true,
autoHeight:true,
autoWidth:true,
initComponent:function(){
this.items=[{
xtype:'textfield',
fieldLabel:'something'
}];
this.columns=[
{
header:'Select a template',
flex:2
},
{header:'Category'},
{header:'Warehouse'}];
this.callParent(arguments);     
}});

Answer 1

Why do you need to extend both? You can just extend form and add gridpanel as an item e.g.

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',
    height: 250,
    width: 400,
    bodyPadding: 10,
    title: 'My Form',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'textfield',
                    anchor: '100%',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'gridpanel',
                    title: 'My Grid Panel',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            text: 'String'
                        }
                    ]
                }
            ]
        });
        me.callParent(arguments);
    }

});