Put a nestedlist in a tabpanel? doesn't work in Sencha touch 2....

**Simon.liu** · 30 Nov 2011 10:00 PM

I am trying to put a nested list as a tab in a tabpanel... i assume following codes should work.. however, it doesn't. the list items don't show... since this was a bug in touch-1 PR version, i am wondering whether this is another one in touch-2 PR version...

Code:

<!DOCTYPE html><html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="http://docs.sencha.com/touch/2-0/touch/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="http://docs.sencha.com/touch/2-0/touch/sencha-touch-all.js"></script>
    <script type="text/javascript">
        Ext.setup({
        onReady : function() {    
            var nestedList = Ext.create('Ext.dataview.NestedList', {
                title: 'Options',       
                items: [{
                    text: 'Option A',
                    items: [{
                        text: 'Option A.1',
                        leaf: true
                    },{
                        text: 'Option A.2',
                        leaf: true
                    }]
                },{
                    text: 'Option B',
                    items: [{
                        text: 'Option B.1',
                        leaf: true,
                    },{
                        text: 'Option B.2',
                        leaft: true
                    }]
                }]        
            });   
 
        Ext.create('Ext.TabPanel', {
            fullscreen: true,
            tabBarPosition: 'bottom',




            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    items: [nestedList]
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        });
    }
});
    </script>
</head>
<body>
</body>
</html>

Simon.liu

it turns out that the width/height of nestedlist need to be specified.. or specify its layout..then it'll work.

**Molamini** · 1 Dec 2011 12:02 AM

If you can avoid using a Panel, the code seems to work. In other words, have the NestedList object as the top level object and possibly use toolbars to substitute as tabs. Check out the same kind of problem at
http://www.sencha.com/forum/showthre...ght=nestedlist

**dontbugme** · 1 Dec 2011 4:52 AM

please delete.. wrong thread

**Simon.liu** · 1 Dec 2011 8:10 AM

what do you mean it's a wrong thread???

**Simon.liu** · 1 Dec 2011 8:20 AM

it turns out that the width/height of nestedlist need to be specified.. or specify its layout..then it'll work.

**Molamini** · 3 Dec 2011 7:55 AM

I can't seem to get the nested list to work. What precisely did you do to get the NestedList object to work in the TabbedPanel?

Code:

<!DOCTYPE html><html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="http://docs.sencha.com/touch/2-0/touch/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="http://docs.sencha.com/touch/2-0/touch/sencha-touch-all.js"></script>
    <script type="text/javascript">
        Ext.setup({
        onReady : function() {    
            var nestedList = Ext.create('Ext.dataview.NestedList', {
                title: 'Options',       
                items: [{
                    text: 'Option A',
                    items: [{
                        text: 'Option A.1',
                        leaf: true
                    },{
                        text: 'Option A.2',
                        leaf: true
                    }]
                },{
                    text: 'Option B',
                    items: [{
                        text: 'Option B.1',
                        leaf: true
                    },{
                        text: 'Option B.2',
                        leaft: true
                    }]
                }]        
            });   
 
        Ext.create('Ext.TabPanel', {
            fullscreen: true,
            tabBarPosition: 'bottom',








            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
					//layout: 'card',
					width: '100%',
					height: '100%',
                    items: [nestedList]
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        });
    }
});
    </script>
</head>
<body>
</body>
</html>

**Simon.liu** · 4 Dec 2011 11:31 AM

it seems that the nestedlist code doesn't work. i just tested only showing nestedlist with fullscreent=true, but didn't work;
so I just copied example code of nestedlist from Sencha Touch 2 Docs, and replace current code...

then I changed width/height in Home item config by [layout: 'fit'], now it works...

Put a nestedlist in a tabpanel? doesn't work in Sencha touch 2....

Thread Tools

Search Thread

Display

Answered: Put a nestedlist in a tabpanel? doesn't work in Sencha touch 2....

Answered: Put a nestedlist in a tabpanel? doesn't work in Sencha touch 2....

Avoid using a panel...

Avoid using a panel...

Tags for this Thread