Results 1 to 5 of 5

Thread: Problem with nesting TabPanel -> Panel -> List

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    69
    Answers
    1

    Default Problem with nesting TabPanel -> Panel -> List

    Hi,

    I'm trying to migrate to ST 2. I have managed to fix loads of things, but for some reason I can't get the old layout to work. I have a TabPanel with 3 Panels, one of thouse panels contains NestedList and some other components. The list is not displayed correctly - HTML is created, but the list is invisible (with the NestedList the title was visible). I have made a simple example that illustrates this. Can you give me any hints on how to solve that?

    TabPanel
    Code:
    Ext.define("HdMobile.view.tabpanel", {
        extend: 'Ext.tab.Panel',
        xtype: 'HdMobile.view.tabpanel',
        requires: [
            'HdMobile.view.card1',
            'HdMobile.view.card2'
        ],
        
        config: {
            id: 'tab-1',
            items: [
                {
                    xtype: 'container',
                    title: 'Tab 1',
                    items: [
                        {
                            xtype: 'HdMobile.view.card1',
                            id: 'card1-1'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    title: 'Tab 2',
                    items: [
                        {
                            xtype: 'HdMobile.view.card2',
                            id: 'card1-2'
                        }
                    ]
                }
            ]
        }   
        
    });
    Card with a List component
    Code:
    Ext.define("HdMobile.view.card1", {
        extend: 'Ext.Panel',
        xtype: 'HdMobile.view.card1',
        requires: [
            'HdMobile.view.list'
        ],
        config: {
            iconCls: "home",
            title: 'Home',
            items:[        
                {    xtype: 'HdMobile.view.list', id: 'list-1-1'}    
            ]        
        }
    });
    And the list itself:
    Code:
    Ext.define("HdMobile.view.list", {
        extend: 'Ext.List',
        xtype: 'HdMobile.view.list',
        id: 'list3333',
        config: {
            itemTpl: '{title}',
            data: [
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 4' }
            ]
        }
    });
    List will get loaded nicely, but only when accessed directly. When placed inside that panel, nothing is shown.

    In another words, I can do it as below, and it works, but when I try to put more components on the same "tab", I group them in Container and than the list stops working.
    Code:
    Ext.define("HdMobile.view.tabpanel", {
        extend: 'Ext.tab.Panel',
    	xtype: 'HdMobile.view.tabpanel',
    	requires: [
            'HdMobile.view.card1',
            'HdMobile.view.card2'
        ],
    	
        config: {
    		id: 'tab-1',
            items: [
                {
                    xtype: 'HdMobile.view.list',
                    title: 'Tab 1'             
                }		
            ]
        }   
    	
    });
    Last edited by MaciejZabielski; 5 Jul 2012 at 6:49 AM. Reason: more information

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132

    Default

    Try giving the list or the parent container a height.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    69
    Answers
    1

    Default

    I have seen a thread when someone also suggested "fit" layout for parent container. The trick is that I also have to remove the 'docked' property from items. (I have used dockeditems in ST1).
    Your Method with setting height also revealed the list, but than I would need to caculate the height manually, and that's not as "clean' as 'fit'.
    Anyway, thanks for your answer that led me to this

    So the code goes like this:
    Code:
    [...]
     items: [
                {
                    xtype: 'container',
                    title: 'Tab 1',
    		layout: 'fit',				
                    items: [
                        { xtype: 'HdMobile.view.list' }
                    ]
                },
    [...]

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132

    Default

    That is fine. I didn't notice you lacked a layout for your container. Definitely use a layout, if you can, instead of manually setting the height. Glad it worked out.

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    You are overnesting... you have a list within a panel within a container. Do you even need the container and panel part?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

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