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
    79
    Answers
    7
    Vote Rating
    3
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar