1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    25
    Vote Rating
    0
    andreik65 is on a distinguished road

      0  

    Default Answered: not getting scrollbars in tabpanel with vbox layout

    Answered: not getting scrollbars in tabpanel with vbox layout


    Hi,

    I'm try to layout a panel in a tabpanel so that it has 2 items, the first one with a height of 1/4 of the container, the second one with a height of 3/4.

    I was trying to use vbox layout and flex and explicitly setting the height of an intermediate container (MIDDLE_PANEL), but that doesn't work properly. I've setup a JSFiddle working example of I would like to achieve http://jsfiddle.net/andreik65/vFXL5/6/ I would like to have the same result but without specifying heights in pixels but using proportions instead.

    Any hint?

    A.

    PHP Code:
    Ext.create('Ext.window.Window', {
        
    id'WINDOW',
        
    title'Hello',
        
    height200,
        
    width400,
        
    layout'fit',
        
    items: {
            
    id'TABPANEL',
            
    xtype'tabpanel',
            
    items: {
                
    id'TAB',
                
    title'A tab',
                
    layout'fit',
                
    items: {
                        
    id'MIDDLE_PANEL',
                        
    xtype'panel',
                        
    autoScrolltrue,
                        
    //height: 1000,
                        //layout: {
                        //    type: 'vbox',
                        //    align: 'stretch'
                        //},
                        
    items: [ {
                                
    id'panelHi',
                                
    xtype'panel',
                                
    height250,
                                
    //flex: 1,
                                
    border1,
                                
    style: {borderColor:'#FF0000'borderStyle:'solid'borderWidth:'1px'},
                                
    html'<p>hi!</p>'
                            
    },
                            {
                                
    id'panelHiToo',
                                
    xtype'panel',
                                
    height750,
                                
    //flex: 3,
                                
    border1,
                                
    style: {borderColor:'#00FF00'borderStyle:'solid'borderWidth:'1px'},
                                
    html'<p>hi too!</p>'
                            
    }]
                    }
            }
        }        


    }).
    show(); 

  2. Basically, you had two problems:
    1. Your tab had a layout of 'fit'
    2. The autoScroll : true should be on the TAB, not the MIDDLE_PANEL

    Something like:
    Code:
    Ext.create('Ext.window.Window', { 
        id: 'WINDOW', 
        title: 'Hello', 
        height: 200, 
        width: 400, 
        layout: 'fit', 
        items: { 
            id: 'TABPANEL', 
            xtype: 'tabpanel', 
            items: { 
                id: 'TAB', 
                title: 'A tab', 
                autoScroll: true,
                items: { 
                        id: 'MIDDLE_PANEL', 
                        xtype: 'panel', 
                        height : 1000,
                        layout: { 
                            type: 'vbox', 
                            align: 'stretch' 
                        }, 
                        items: [ { 
                                id: 'panelHi', 
                                xtype: 'panel', 
                                flex: 1, 
                                border: 1, 
                                style: {borderColor:'#FF0000', borderStyle:'solid', borderWidth:'1px'}, 
                                html: '<p>hi!</p>' 
                            }, 
                            { 
                                id: 'panelHiToo', 
                                xtype: 'panel',
                                flex: 3, 
                                border: 1, 
                                style: {borderColor:'#00FF00', borderStyle:'solid', borderWidth:'1px'}, 
                                html: '<p>hi too!</p>' 
                            }] 
                    } 
            } 
        }         
    
    
    
    
    }).show();

  3. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    108
    Answers
    11
    Vote Rating
    5
    chamacs is on a distinguished road

      0  

    Default


    Basically, you had two problems:
    1. Your tab had a layout of 'fit'
    2. The autoScroll : true should be on the TAB, not the MIDDLE_PANEL

    Something like:
    Code:
    Ext.create('Ext.window.Window', { 
        id: 'WINDOW', 
        title: 'Hello', 
        height: 200, 
        width: 400, 
        layout: 'fit', 
        items: { 
            id: 'TABPANEL', 
            xtype: 'tabpanel', 
            items: { 
                id: 'TAB', 
                title: 'A tab', 
                autoScroll: true,
                items: { 
                        id: 'MIDDLE_PANEL', 
                        xtype: 'panel', 
                        height : 1000,
                        layout: { 
                            type: 'vbox', 
                            align: 'stretch' 
                        }, 
                        items: [ { 
                                id: 'panelHi', 
                                xtype: 'panel', 
                                flex: 1, 
                                border: 1, 
                                style: {borderColor:'#FF0000', borderStyle:'solid', borderWidth:'1px'}, 
                                html: '<p>hi!</p>' 
                            }, 
                            { 
                                id: 'panelHiToo', 
                                xtype: 'panel',
                                flex: 3, 
                                border: 1, 
                                style: {borderColor:'#00FF00', borderStyle:'solid', borderWidth:'1px'}, 
                                html: '<p>hi too!</p>' 
                            }] 
                    } 
            } 
        }         
    
    
    
    
    }).show();

  4. #3
    Sencha User
    Join Date
    Nov 2007
    Posts
    25
    Vote Rating
    0
    andreik65 is on a distinguished road

      0  

    Default


    Thanks a lot Chamacs, you're my hero!

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