Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Answers
    1
    Vote Rating
    2
    Simon.liu is on a distinguished road

      0  

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


    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>

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

  3. #2
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    28
    Vote Rating
    0
    Molamini is on a distinguished road

      0  

    Default Avoid using a panel...

    Avoid using a panel...


    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

  4. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Answers
    1
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default


    please delete.. wrong thread

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Answers
    1
    Vote Rating
    2
    Simon.liu is on a distinguished road

      0  

    Default


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

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Answers
    1
    Vote Rating
    2
    Simon.liu is on a distinguished road

      1  

    Default


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

  7. #6
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    28
    Vote Rating
    0
    Molamini is on a distinguished road

      0  

    Default


    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>

  8. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Answers
    1
    Vote Rating
    2
    Simon.liu is on a distinguished road

      1  

    Default


    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...

Thread Participants: 2

Tags for this Thread