1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    78
    Vote Rating
    1
    Johnbran is on a distinguished road

      0  

    Default Designer Creates Extended Class

    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.

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    127
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 1