Designer Creates Extended Class

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.

Johnbran -

I think I know what you are doing here but I am not 100% positive. It sounds like you built a TabPanel, that had a container in it w/ layout of card and then a bunch of additional panels.

The first set of code that you posted above shows the top level class when you clicked on the tabpanel in the inspector. The second set of code shows the top level class that would be generated if you were to use that as a class.

The idea was that this feature that can be useful for building large nested configurations and then copying out the JSON or Class to be used elsewhere. We will be removing this feature before GA and *always* showing the top level class when showing generated code.

For people who want the behavior that I described above, they will simply have to promote the class from a lower level and then look at its generated code once it is a top level class.

Make sense?