1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    395
    Answers
    1
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default Answered: Problem with using a custom xtype in item declaration of Tabpanel

    Answered: Problem with using a custom xtype in item declaration of Tabpanel


    Hi,

    I am setting up my application using the MVC approach, but have run into a problem with one of my views I have defined not being displayed in a tab of a TabPanel.

    I have a Panel view as follows:

    Code:
    Ext.define('PinpointersTouch.view.UnitList', {
        extend: 'Ext.Panel',
        fullscreen:true,
        xtype: 'unitslist',
        items: [
            {
                dock : 'top',
                xtype: 'toolbar',
                title: 'Standard Titlebar'
            },
            {
                dock : 'top',
                xtype: 'toolbar',
                ui   : 'light',
                items: [
                    {
                        text: 'Test Button'
                    }
                ]
            }
        ],
        html: 'Testing'
    
    
    });
    (Ignore the fact its called UnitList as it will become a list eventually, just testing with basic panel content right now)

    I then have my TabPanel view declared as such:

    Code:
    Ext.define('PinpointersTouch.view.MainView', {
        extend: 'Ext.TabPanel',
        requires: [
            'PinpointersTouch.view.UnitList'
        ],
    
    
        config: {
            fullscreen: true,
            tabBarPosition: 'bottom',
            
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0pr1)</h2>'
                    ].join("")
                }, {
                    xtype: 'unitslist',
                    title: 'Units',
                    iconCls: 'locate',
    
    
                }
            ]
        }
    });
    When running the app in Chrome, I get the first tab displayed with the tab bar at the bottom, but when going to the second tab nothing gets displayed. If just use the Items config of my UnitsList Panel code as the config for my second tab it displays just fine:

    Code:
    Ext.define('PinpointersTouch.view.MainView', {
        extend: 'Ext.TabPanel',
        requires: [
            'PinpointersTouch.view.UnitList'
        ],
    
    
        config: {
            fullscreen: true,
            tabBarPosition: 'bottom',
            
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0pr1)</h2>'
                    ].join("")
                }, {
                    //xtype: 'unitslist',
                    title: 'Units',
                    iconCls: 'locate',
                    items: [
                    {
                        dock : 'top',
                        xtype: 'toolbar',
                        title: 'Standard Titlebar'
                    },
                    {
                        dock : 'top',
                        xtype: 'toolbar',
                        ui   : 'light',
                        items: [
                            {
                                text: 'Test Button'
                            }
                        ]
                    }
                ],
                html: 'Testing'
    
    
                }
            ]
        }
    });
    Am I do something wrong here with my xtype declaration in the UnitsList Panel view code?

  2. One thing I noticed is that you are not putting configuration in the config object in the UnitList view:

    PHP Code:
    Ext.define('PinpointersTouch.view.UnitList', {
        
    extend'Ext.Panel',
        
    xtype'unitslist',
        
    config: {
            
    fullscreen:true,
            
    items: [
                {
                    
    dock 'top',
                    
    xtype'toolbar',
                    
    title'Standard Titlebar'
                
    },
                {
                    
    dock 'top',
                    
    xtype'toolbar',
                    
    ui   'light',
                    
    items: [
                        {
                            
    text'Test Button'
                        
    }
                    ]
                }
            ],
            
    html'Testing'
        
    }
    }); 

  3. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    Shouldn't that be Ext.tab.Panel instead of Ext.TabPanel ?

  4. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    395
    Answers
    1
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


    Both Ext.TabPanel and Ext.tab.Panel work

  5. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Answers
    28
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    There has been a bug report about similar unexpected behavior with xtype in MVC. We will look into this.

  6. #5
    Sencha User
    Join Date
    Dec 2010
    Posts
    68
    Vote Rating
    -1
    jairok is an unknown quantity at this point

      0  

    Default


    Maybe a hint
    When I use xtype, the page stay white but when I look into the HTML, everything is created.
    The problem is the mainview has a display:hidden property

    if it can help

  7. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Answers
    28
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    One thing I noticed is that you are not putting configuration in the config object in the UnitList view:

    PHP Code:
    Ext.define('PinpointersTouch.view.UnitList', {
        
    extend'Ext.Panel',
        
    xtype'unitslist',
        
    config: {
            
    fullscreen:true,
            
    items: [
                {
                    
    dock 'top',
                    
    xtype'toolbar',
                    
    title'Standard Titlebar'
                
    },
                {
                    
    dock 'top',
                    
    xtype'toolbar',
                    
    ui   'light',
                    
    items: [
                        {
                            
    text'Test Button'
                        
    }
                    ]
                }
            ],
            
    html'Testing'
        
    }
    }); 

  8. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    395
    Answers
    1
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Wink


    Thanks Tommy, that was the issue, I will remember that for next time!