1. #1
    Sencha User rbellow's Avatar
    Join Date
    Dec 2011
    Location
    Austin, Texas
    Posts
    6
    Answers
    2
    Vote Rating
    0
    rbellow is on a distinguished road

      0  

    Post Answered: Nested panel not scrolling

    Answered: Nested panel not scrolling


    I am trying to create a panel with three sections and a docked toolbar on the bottom. The first section is the header and should be on every "Page" along with the toolbar. I also have a Panel for the "content" section with that includes a carousel and a regular Panel. I set the heights of the header and carousel and used vbox for the root and content panels for the layout. The problem is that the bottom section doesn't scroll and the toolbar gets pushed off the screen. I thought if I define the heights of all the other panels the one without the height defined would fill the space. I think I may be missing something. Any ideas?

    Code:
    Ext.application({
        name: 'App',
        autoMaximize: true,
    
        launch: function () {
    
            // the header in the first section
            var firstSection = Ext.create("Ext.Panel", {
                style: "background-color: yellow;",
                height: 70,
                html: 'first section'
            });
    
            // a carousel in the second section
            var secondSection = Ext.create("Ext.Carousel", {
                style: "border-bottom: solid 1px #003a66;",
                height: 240,
                items: [
                    { html: '<div class="center">second section - Item 1</div>' },
                    { html: '<div class="center">second section - Item 2</div>' },
                    { html: '<div class="center">second section - Item 3</div>' }
                ]
            });
    
            // this section should scroll within itself but the
            // above 2 panels should not move
            var thirdSectionContent = Ext.create("Ext.Container", {
                items:[{
                    html: [
                        'line 1<br />',
                        'line 2<br />',
                        'line 3<br />',
                        'line 4<br />',
                        'line 5<br />',
                        'line 7<br />',
                        'line 8<br />',
                        'line 9<br />',
                        'line 10<br />',
                        'line 11<br />',
                        'line 12<br />',
                        'line 13<br />',
                        'line 14<br />',
                        'line 15<br />',
                        'line 16<br />',
                        'line 17<br />',
                        'line 18<br />',
                        'line 19<br />',
                        'line 20<br />'
                    ].join("")
                }]
            });
    
            var thirdSection = Ext.create("Ext.Panel", {
                items: [thirdSectionContent]
            });
    
            
            var navHome = Ext.create("Ext.Button", {
                dock: 'bottom',
                iconCls: 'home',
                iconMask: true
            });
    
            var navBlog = Ext.create("Ext.Button", {
                dock: 'bottom',
                iconCls: 'star',
                iconMask: true
            });
    
            // toolbar docked on the bottom
            var toolBar = Ext.create("Ext.Toolbar", {
                docked: 'bottom',
                items: [navHome, navBlog]
            });
    
            var twoSectionDisplay = Ext.create("Ext.Panel", {
                items: [secondSection, thirdSection]
            });
    
            var contentPanel = Ext.create("Ext.Panel", {
                layout: 'vbox',
                items: [twoSectionDisplay]
            });
    
            var rootPanel = Ext.create("Ext.Panel", {
                fullscreen: true,
                items: [firstSection, contentPanel],
                layout: 'vbox',
                dockedItems: [toolBar]
            });
    
    
        }
    });

  2. Why is it that just typing out the problem gives you the answer. I docked the firstSection panel to the top and added scoll: vertical to the rootPanel and got the effect I was looking for.

  3. #2
    Sencha User rbellow's Avatar
    Join Date
    Dec 2011
    Location
    Austin, Texas
    Posts
    6
    Answers
    2
    Vote Rating
    0
    rbellow is on a distinguished road

      0  

    Default


    Why is it that just typing out the problem gives you the answer. I docked the firstSection panel to the top and added scoll: vertical to the rootPanel and got the effect I was looking for.

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