1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    15
    Vote Rating
    0
    revilo78 is on a distinguished road

      0  

    Default Answered: Scroll Away Container on Top of a List

    Answered: Scroll Away Container on Top of a List


    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.

    Code:
    {
        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

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

    Code:
    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(''),
        },
    });

  3. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Toronto, Canada
    Posts
    92
    Vote Rating
    12
    Answers
    20
    iSmartDevice is on a distinguished road

      0  

    Default


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

    Code:
    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(''),
        },
    });

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    15
    Vote Rating
    0
    revilo78 is on a distinguished road

      0  

    Default


    Works great, thanks!

Thread Participants: 1

Tags for this Thread