Results 1 to 2 of 2

Thread: Designer Creates Extended Class

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    80
    Vote Rating
    1
      0  

    Default 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 User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    145
      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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •