Horizontal Scrolling around a Vertical List

[jSkrinska]

I have a wide Vertical List which I want to scroll horizontally. But I can't figure out the right combination of containers that allow horiz scrolling for the underlying List. When I add width to the parent container, it allows me to scroll and see all content, but if I lift my finger the view snaps back to 0px. If I set parent container's layout:auto, then the x-axis scroller looks correct, but the List disappears and only the header bar remains.

Any suggestions would be appreciated

I made a sample off this senchaFiddle example:
http://www.senchafiddle.com/#dSMpw

Ext.define('SenchaFiddle.store.Store', {
    extend:'Ext.data.Store',
    config: {
        model:'SenchaFiddle.model.Model',
        data:[
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
            {icon:'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'},
        ]
            }
            
            });
            
            
            
            Ext.define('SenchaFiddle.model.Model', {
            extend: 'Ext.data.Model',
            config: {
            fields: [{
            name: 'icon',
            type: 'string'
            }]
    }
});








Ext.Loader.setConfig({
    enabled: true
});


Ext.application({
    name: 'SenchaFiddle',
    models:['Model'],
    stores:['Store'],
    
    launch: function() {
        var list = Ext.create('Ext.List',{
            store: 'Store',
            itemTpl: new Ext.XTemplate('<img src="{icon}" width=750 height=50/>'),
            flex:1
        });
        
        var panel = Ext.create('Ext.Container', {
            layout:'fit',
            width:750,
            scrollable : {
                direction     : 'horizontal',
                directionLock : true
            },
            items: [
                    Ext.create('Ext.Container', {
                layout:'vbox',
                width:750,
                items: [
                    {
                        html: 'Header bar',
                    },
                    list
                ]
            })
            ]
        });
        
        Ext.Viewport.add(panel)
            }
});

[mitchellsimoens]

Instead of just layout : 'vbox, try

layout : {
    type  : 'vbox',
    align : 'stretch'
}

[jSkrinska]

I added it into
http://www.senchafiddle.com/#dSMpw#nRlXh

But it still doesnt handle. What is the best way to allow scrolling on wide content.

An example of what I am trying to do is below. The x's are content in the viewport, and the y's are the overflow.

The ideal rendering of the scroll bar
----------------
|xxxxxxxxxx|yyyyyyy
|xxxxxxxxxx|yyyyyyy
|xxxxxxxxxx|yyyyyyy
|xxxxxxxxxx|yyyyyyy
|xxxxxxxxxx|yyyyyyy
|scroooooool|
----------------


It looks like the viewport creates this wider scroll bar:

----------------
|xxxxxxxxxx|yyyyyyy
|xxxxxxxxxx|yyyyyyy
|xxxxxxxxxx|yyyyyyy
|xxxxxxxxxx|yyyyyyy
|xxxxxxxxxx|yyyyyyy
|scroooooooo|ooooool
----------------

Anything come to mind for what is wrong here? Or are there any examples someone has which demonstrates simple overflow scrolling?

Thanks