1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    12
    Vote Rating
    1
    Answers
    1
    jeremylauraire is on a distinguished road

      0  

    Default Unanswered: Vertically scrollable container does not really scroll...

    Unanswered: Vertically scrollable container does not really scroll...


    Hi Senchamen,

    I have trouble trying to have a container scrolling with several items attached : such as a Panel, a Carousel and a List. Basically I would like to obtain a vertically scrollable overflow container. To perform this I have used a vbox layout that is set to scrollable vertical.

    I have found a couple of posts on the same subject on the forum (Scrollable not working on dynamically added items) and I have tried the solutions given with no luck.

    Here is the code my code for the container so far...

    Code:
    /* 
     *
     * The scrollable container
     *
     */
    Ext.define('MyApp.view.DetailView', {
        
        extend  : 'Ext.Container',
        xtype   : 'detailview',
    
    
        config: {
            layout : {
                type  : 'vbox',
                align : 'stretch'
            },
            scrollable:'vertical',
            
            items: [
                {
                    // a data view
                    flex:1,
                    xtype: 'infoview',
                    layout:'fit',
                    scrollable:false
    
    
                },
                {
                    // a carousel
                    flex:1,
                    scrollable:false,
                    xtype:'carouselpicsview'
                },
                {
                    // a list
                    flex: 2,
                    xtype: 'reviews',
                    items: [
                        {
                            xtype: 'listitemheader',
                            html: 'Reviews'
                        }
                    ]
                }
            ]
        }
    
    
    });
    I the put this container into a navigation view. The container scrolls but then stick back to 0px position which is not excepted. Any suggestion?

    Thank you,
    J.

  2. #2
    Sencha User
    Join Date
    Dec 2012
    Posts
    12
    Vote Rating
    1
    Answers
    1
    jeremylauraire is on a distinguished road

      0  

    Default Fixed!

    Fixed!


    Basically here is the trick :
    • do not use a vbox to do that,
    • set scrollable:false to all the elements but a List,
    • set a height too or layout 'fit'...
    Should work. Here is the code :

    Code:
    /* 
     * 
     */
    Ext.define('MyApp.view.DetailView', {
        
        extend  : 'Ext.Container',
    
    
        config: {
    
    
            scrollable:'vertical',
            
            items: [
                {
                    // a data view
                    xtype: 'infoview',
                    layout:'fit',
                    scrollable:false
                },
                {
                    // a carousel
                    xtype:'carouselview',
                    height:100,
                    scrollable:false
                },
                {
                    // a list
                    height:600,
                    xtype: 'mylist',
                    items: [
                        {
                            xtype: 'listitemheader',
                            html: 'Reviews'
                        }
                    ]
                }
            ]
        }
    
    
    });
    J.