List and dataview scrollig issues

[sandeepmnit35]

     Ext.define('Por.view.VideoRecordList', {
        extend: 'Ext.Container',
        xtype:'videorecordlist',
        
        config:{
            layout:'vbox',
             autoDestroy: true,
            scrollable: {
            direction: 'vertical'
                },
            items:[
                {
           xtype : "titlebar",
           docked : "top",
           name : 'detailToolbar',
           
           items : [{
           xtype: 'button',
                        ui : 'back',
                  text: 'Back',
                  align: 'left',
                        action : 'back'
        
           }]
          },     
        
                 {
                   xtype: 'panel',
                   html:'<div style="text-align: center; padding-top:10px;"><img style="height: 100px; width: 100px; text-align:center;" src="resources/images/professional.png" /></div>'
                 },
                 
                {
                   xtype: 'panel',
                         id: 'title',
                   html:'<div style="font-size:14px;color: #5090D0; padding-left:15px; padding-right:20px;font-weight:bold;">Amy Codner, Lindsay Uhrig  Lauren Bryant, Kenneths Salon  Day Spa Credit/Debit Processing Interview</div>'
                 },
        
                 {
                   xtype: 'panel', 
                      id: 'account',                        
                   html: '<div><p style="font-size:12px;padding-left:15px; padding-right:20px;"> <span style="font-weight:bold;font-size:14px;"><b>Account:  </b></span> Kenneths Hair Salons and Day Spas </p></div>'
                 },
                 
                 {
                   xtype: 'panel',
                   id: 'updated',    
                   html: '<div><p style="font-size:12px;padding-left:15px; padding-right:20px;"><span style="font-weight:bold;font-size:14px;">updated:  </span> 2011 may 17 </p></div>'
                 },
                 
                    { 
                        xtype:'dataview',
                        id:'previewlist',
                  flex:1,
                  allowDeselect: true,
                  scrollable: false,                                
                  store: 'Interviews',
                  itemTpl:'<div ><div style = "float:left"><div style="font-size:14px;font-weight:bold;">{question}</div></div><div style= " float:right;"><img height = "20px" src=resources/index.png></div><div style= "clear:both;"></div></div>',
                  listeners: {
                                select: function(view, record) {
                            this.parent.fireEvent("previewRecord", record);
        
        
        
                }
        
            }            
        }
        
                ]
        },
        
        
        
        });


 

I am using below view and I am scrolling the entire page while scrolling but it is moving up and then coming down after tap end. What I am missing here?

I tried to replace listview with dataview but I am getting the same result so please let me know what I am missing here.

[mitchellsimoens]

You are using vbox layout and giving the dataview a flex 1 which will size it to fit the rest of the panel's height which is causing it to not scroll any more

[sandeepmnit35]

I have solved issue but giving confir height 100% in list.