how to enable scrolling in list when content overflows in Sencha touch

Question

I have a view which is in vbox layout with two items (a calendar plugin at top and a list at bottom) and is set to scrollable false as i dont want scroll on whole component. What i require is that in the list at bottom i have a store that is populated remotely and i cannot figure out how to enable scrolling in that list if the items exceed the available space in list.

this is the parent view

Ext.define('BudgetApp.view.transaction.TransactionDetailView', {
   extend: 'Ext.Container',
   xtype: 'transactiondetailview',
   config: {
      scrollable: false,
      fullScreen: true,
      layout: 'vbox',
      items: [{
            xtype: 'calendar',
            id: 'touchCalendarView',
            itemId: 'touchCalendarView',
            viewMode: 'month',
            value: new Date(),
            flex: 1.3,
            viewConfig: {
               weekStart: 1,
               eventStore: eventStore
            },
            enableEventBars: {
               eventHeight: 'auto',
               eventBarTpl: new Ext.XTemplate(
                  '<tpl if="amount &gt; 0">' +
                     '<span style="color:green; top:0; left:0; font-size:8px; font-weight:bold; position:relative; text-shadow:none;">${amount}</span>' +
                     '</tpl>' +
                     '<tpl if="amount == 0">' +
                     '<span style="color:black; top:0; left:0; font-size:8px; font-weight:bold; position:relative; text-shadow:none;">${amount}</span>' +
                     '</tpl>' +
                     '<tpl if="amount &lt; 0">' +
                     '<span style="color:red; top:0; left:0; font-size:8px; font-weight:bold; position:relative; text-shadow:none;">${amount}</span>' +
                     '</tpl>' +
                     '<tpl if="!clear && clear !=null">' +
                     '<p style="color:black; top:0; left:0; font-size:8px; font-weight:normal; position:relative; text-shadow:none;">&#9679;</p>' +
                     '</tpl>'
               )
            }
         },
         {
            xtype: 'forcasttransactionlist',
            itemId: 'forecastTransactionList',
            scrollable: true,
            //height:'100%',
            //style: 'overflow:auto;',
            flex: 1
         }
      ]
   }
});

below is the list code

Ext.define('BudgetApp.view.transaction.ForecastTransactionList', {
   extend: 'Ext.List',
   xtype: 'forcasttransactionlist',
   config: {     
      store: {
         fields: ['name', 'age'],
         data: [
             { name: 'Jamie', age: 100 },
             { name: 'Rob', age: 21 },
             { name: 'Tommy', age: 24 }/*,
             { name: 'Jacky', age: 24 },
             { name: 'Ed', age: 26 },
             { name: 'Jamie', age: 100 },
             { name: 'Rob', age: 21 },
             { name: 'Tommy', age: 24 },
             { name: 'Jamie', age: 100 },
             { name: 'Rob', age: 21 },
             { name: 'Tommy', age: 24 },
             { name: 'Jacky', age: 24 }*/
         ]
      },
      itemTpl: '<div>{name} is {age} years old</div>'
   }
});

I tried setting scrollable:true but it will display scroll even if there is just single item in list. I also tried setting style:'overflow:auto;' to list config in parent but that didn't work.

I want to enable scroll only if list overflows the available space.

Any help please ???

Answer 1

There isn't a built-in mechanism for this, you would need to implement your own. Unless you have additional custom list settings (such as variableHeight) then it's actually not that difficult. I put together a quick Sencha Fiddle showing how it would work.

https://fiddle.sencha.com/#fiddle/8uc