Hello,
Can someone please tell me why designer does this? When I create a new object say for example a TabPanel, and then populate it with child objects, Designer creates a new extended class which seems to never be used. Here is an example of the code generated.

Here is the base Tabpanel...

Code:
Ext.define('MyApp.view.MyTabPanel', {
    extend: 'Ext.tab.Panel',


    config: {
        style: 'background-color:green',
        tabBar: {
            docked: 'bottom'
        },
        items: [
            {
                xtype: 'container',
                html: 'base',
                id: 'Tab1',
                itemId: 'Tab1',
                style: 'background-color:pink',
                layout: {
                    type: 'card'
                },
                title: 'One',
                iconCls: 'info',
                items: [
                    {
                        xtype: 'panel',
                        items: [
                            {
                                xtype: 'button',
                                height: 25,
                                itemId: 'mybutton',
                                left: 50,
                                top: 50,
                                width: 50,
                                text: 'MyButton'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        html: 'child 2',
                        layout: {
                            type: 'card'
                        }
                    }
                ]
            },
            {
                xtype: 'container',
                id: 'Tab2',
                title: 'Two',
                iconCls: 'info'
            }
        ],
        listeners: [
            {
                fn: 'onMybuttonTap',
                event: 'tap',
                delegate: '#mybutton'
            }
        ]
    },


    onMybuttonTap: function(button, e, options) {


        Tab1.setActiveItem('MyPanel1');
    }
Notice that the tabpanel contains the items 'Tab1' and 'Tab2' with the xtype of 'container'. Why then does designer create the extended class like this...

Code:
Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',


    config: {
        html: 'base',
        id: 'Tab1',
        itemId: 'Tab1',
        style: 'background-color:pink',
        layout: {
            type: 'card'
        },
        title: 'One',
        iconCls: 'info',
        items: [
            {
                xtype: 'panel',
                items: [
                    {
                        xtype: 'button',
                        height: 25,
                        itemId: 'mybutton',
                        left: 50,
                        top: 50,
                        width: 50,
                        text: 'MyButton'
                    }
                ]
            },
            {
                xtype: 'panel',
                html: 'child 2',
                layout: {
                    type: 'card'
                }
            }
        ]
    }

Any insight on this behavior would be appreciated. Thanks.