Scroll Away Container on Top of a List

[revilo78]

I would like to have a Container with some html information placed on top of my list and also scroll away with my list. For example, if a user scrolls down through the list, then the container will also scroll away. I would think this is possible, but everything I tried so far has been unsuccessful.

Any help would be greatly appreciated. Below is the code I have so far. I tired having an overall container set scrollable with the html container and list set as its items, but no luck. I also tried changing the layout settings and height too, but I would prefer not to have a defined height.

{
    xtype: 'container',
    fullscreen: true,
    scrollable: true,
    layout: 'vbox',
    
    items:[

        {
            xtype: 'container',
            height: '180px',
            baseCls: 'showdetailtop',
            flex: 1,
            scrollable: true,
        html: ' ...image and list description info goes here .. '
        },
        
        
        {    
        
            
            xtype: 'list',                
        store: 'Show_store',            
            scrollable: true,
            setToolbar: false,
            flex: 5,


            styleHtmlContent: true,
            loadingText: 'Loading Posts...',
            emptyText: '<div class="empty">empty text - update</div>',
                
            itemTpl: '<img src="{ThumbnailURL}" /><h2>{Author}</h2><p>{Content}</p>',
            baseCls: 'news-dataview'
        
    }
   
]}        //second container items

[iSmartDevice]

Move the "container" block to the "list" block like below.

Ext.define("Gallery.view.ContainerTest", {
    extend: 'Ext.Container',
    xtype: 'containerTest',


    requires: [
        'Gallery.view.GroupList',
    ],


    config:{
        layout: 'fit',
        items:[
            {
                items:[
                    {
                        xtype: 'container',
                        height: '180px',
                        baseCls: 'showdetailtop',
                        html: ' ...image and list description info goes here .. '
                   }
                ],
                xtype:'groupList'
           }
        ],
    },
});


Ext.define("Gallery.view.GroupList", {
    extend: 'Ext.List',
    xtype: 'groupList',
    requires: [
        'Gallery.store.User'
    ],


    config:{
        store: 'User',
        itemTpl: [
                '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
                '<div>',
                '    <img class="xplay" src="http://www.starrbc.org/play_button.jpg" width="24" height="24"/>',
                '</div>'
                ].join(''),
    },
});

[revilo78]

Works great, thanks!