1. #1
    Sencha User LoneWolfPR's Avatar
    Join Date
    Aug 2012
    Posts
    34
    Answers
    1
    Vote Rating
    0
    LoneWolfPR is on a distinguished road

      0  

    Default Answered: Is it possible to nest a tabpanel inside a vbox?

    Answered: Is it possible to nest a tabpanel inside a vbox?


    I'm trying to implement the following but it doesn't seem to work. It just loads with the tabbar at the top of the page without showing the logo bar that should be in the first part of the vbox. What I want is for the logo bar listed to be persistent across the top and when you click the tab bar buttons the content slides back and forth below the logo bar. Is this possible, and if so, what am I doing wrong?
    Code:
    Ext.define("RFN.view.Main", {    extend: 'Ext.Panel',
        config: {
            items: [
                {
                    
                    //styleHtmlContent: true,
                    //scrollable: true,
                    layout: 'vbox',
                    items:[
                        {
                            xtype: 'image',
                            src: 'resources/images/logo.png',
                            style: 'background-color: #174a7c; background-position:center; background-size:auto 90%; text-align:center;',
                            flex: 1
                            
                        },
                        {
                            xtype: 'tabpanel',
                            tabBarPosition: 'bottom',
                            
                            items: [
                                {
                                    title: 'Calculate',
                                    iconCls: 'home',
                                    xtype: 'formpanel',
                                    items: [
                                        //
                                    ],
                                },
                                {
                                    title: 'Compare',
                                    iconCls: 'chart2',
                                    //styleHtmlContent: true,
                                    //scrollable: true,
                                    layout: 'fit',
                                    items:[
                                        {
                                            xtype: 'panel',
                                            style: 'background-color: #eee;',
                                            html: '<div id="chart_div"></div>'
                                            
                                        }
                                    ]
                                }
                                
                            ],
                            style: 'background-color: #eee; text-align:center; margin:0;',
                            flex:3.5
                        }
                    ]
                }
                
            ]
        }
    });

  2. I think you have too many containers.
    Try this out:
    Code:
    Ext.define("RFN.view.Main", {
        extend: 'Ext.Panel',
        config: {
            layout: 'vbox',
            items: [{
                xtype: 'image',
                src: 'resources/images/logo.png',
                style: 'background-color: #174a7c; background-position:center; background-size:auto 90%; text-align:center;',
                flex: 1
            },
            {
                xtype: 'tabpanel',
                tabBarPosition: 'bottom',
                items: [
                    {
                        title: 'Calculate',
                        iconCls: 'home',
                        xtype: 'formpanel'
                    },
                    {
                        title: 'Compare',
                        iconCls: 'chart2',
                        layout: 'fit',
                        items:[
                            {
                                xtype: 'panel',
                                style: 'background-color: #eee;',
                                html: '<div id="chart_div"></div>'
                            }
                        ]
                    }
                ],
                style: 'background-color: #eee; text-align:center; margin:0;',
                flex:3.5
            }] 
        }
    });

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    I think you have too many containers.
    Try this out:
    Code:
    Ext.define("RFN.view.Main", {
        extend: 'Ext.Panel',
        config: {
            layout: 'vbox',
            items: [{
                xtype: 'image',
                src: 'resources/images/logo.png',
                style: 'background-color: #174a7c; background-position:center; background-size:auto 90%; text-align:center;',
                flex: 1
            },
            {
                xtype: 'tabpanel',
                tabBarPosition: 'bottom',
                items: [
                    {
                        title: 'Calculate',
                        iconCls: 'home',
                        xtype: 'formpanel'
                    },
                    {
                        title: 'Compare',
                        iconCls: 'chart2',
                        layout: 'fit',
                        items:[
                            {
                                xtype: 'panel',
                                style: 'background-color: #eee;',
                                html: '<div id="chart_div"></div>'
                            }
                        ]
                    }
                ],
                style: 'background-color: #eee; text-align:center; margin:0;',
                flex:3.5
            }] 
        }
    });

  4. #3
    Sencha User LoneWolfPR's Avatar
    Join Date
    Aug 2012
    Posts
    34
    Answers
    1
    Vote Rating
    0
    LoneWolfPR is on a distinguished road

      0  

    Default


    That was it! Thanks so much! That was driving me nuts. Looks like there was an items group that I didn't need.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi