Results 1 to 7 of 7

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

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Answers
    2
    Vote Rating
    2
      0  

    Default 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
      0  

    Default

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

  4. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Answers
    2
    Vote Rating
    2
      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
    11
      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
    72
    Vote Rating
    -1
      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
    11
      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
    419
    Answers
    2
    Vote Rating
    2
      0  

    Wink

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

Posting Permissions

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