1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    144
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default Answered: Scrollable not working on dynamically added items

    Answered: Scrollable not working on dynamically added items


    For the below Container, scrollable will not work correctly - it lets me scroll down to the text 'test3', but when I let go of the scroll, it goes straight back up to the top.

    I'm guessing its something to do with the fact I'm using a vbox. If so, how can I pack the three items, but still have it scrollable?

    Code:
    Ext.define("test.view.ProfileDetails", {
        extend: 'Ext.Container',
        xtype: 'profiledetailspanel',
    
    
        config: {
            title: 'My Profile',
            scrollable: true,
    
    
            layout: {
                type : 'vbox',
                align : 'stretch'
            },
    
    
    	items: [
                {
                 	margin: '40 0',
                    html: '<div class="img-loading"></div>'
                }
            ]
    
    
        },
    
    
        initialize: function() {
            this.callParent(); // required to make back button work                 
    
    
            this.setItems([
    			{
                                margin: 20,
                                html: 'test1<br />test1<br />test1<br />test1<br />test1<br />test1<br />',
                                flex: 1
    			},
                            {
                                margin: 20,
                                html: 'test2<br />test2<br />test2<br />test2<br />test2<br />test2<br />',
                                flex: 1
    			},
                            {
                                margin: 20,
                                html: 'test3<br />test3<br />test3<br />test3<br />test3<br />test3<br />',
    
                                flex: 1
    			}
                        ]);
        }
    
    
    });
    What comes around goes around

  2. This was fixed via removing the layout setup.

    However if you then change one of the items from a html to a custom xtype that uses a form.Panel it will disappear. But if you put "scrollable: false" in that custom xtype config, it appears as desired.

  3. #2
    Sencha User
    Join Date
    Sep 2012
    Posts
    144
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    This was fixed via removing the layout setup.

    However if you then change one of the items from a html to a custom xtype that uses a form.Panel it will disappear. But if you put "scrollable: false" in that custom xtype config, it appears as desired.
    What comes around goes around

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

      0  

    Default Can you provide full code...

    Can you provide full code...


    Hi,

    I have quite the same problem with a container (vbox layout) that contains several containers (Panel, List and a Carousel). I would like to obtain the same effect and so far I have the exact same comportment as you describe.

    I have tried your suggestion with no luck. Can you provide full code to reproduce that.

    Thanks,
    J.

  5. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    144
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    Before I post the code (since it takes time).

    Can you remove the vbox layout altogether? And then add "scrollable: false" to all your containers (Panel, List and a Carousel).

    Cheers,
    What comes around goes around

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

      0  

    Default It works

    It works


    I have followed your suggestion + I set a "height" for all the items... and it works. Pretty tricky since I don't know exactly the vertical size of my list before it is rendered... :/

    Here is the code if needed by anyone :

    Code:
    /* 
     *
     */
    Ext.define('MyApp.view.DetailView', {
        
        extend  : 'Ext.Container',
        xtype   : 'detailview',
        id      : 'detailview',
    
    
        config: {
            scrollable:'vertical',
            
            items: [
                {
                    // a data view
                    xtype: 'infoview',
                    layout:'fit',
                    scrollable:false
                },
                {
                    // a carousel
                    height:150,
                    scrollable:false,
                    xtype:'carouselpicsview'
                },
                {
                    // a list
                    height:600,
                    xtype: 'postslist',
                    items: [
                        {
                            xtype: 'listitemheader',
                            html: 'Reviews'
                        }
                    ]
                }
            ]
        }
    
    
    });
    Finally! Thanks,
    J.

  7. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    144
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    You need to put the "scrollable:false" in the config for js files that define your infoview, carouselpicsview and postslist.

    Cheers,
    What comes around goes around

Thread Participants: 1