как включить прокрутку в списке, когда содержимое переполняется в Sencha touch

У меня есть представление, которое находится в макете vbox с двумя элементами (плагин календаря вверху и список внизу) и настроено на прокручиваемое значение false, поскольку я не хочу прокручивать весь компонент. Что мне нужно, так это то, что в списке внизу у меня есть магазин, который заполняется удаленно, и я не могу понять, как включить прокрутку в этом списке, если элементы превышают доступное пространство в списке.

это родительский взгляд

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
         }
      ]
   }
});

ниже приведен код списка

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>'
   }
});

Я попытался установить scrollable:true, но он будет отображать прокрутку, даже если в списке есть только один элемент. Я также попытался настроить style:'overflow:auto;' для отображения конфигурации в родительском элементе, но это не сработало.

Я хочу включить прокрутку, только если список переполняет доступное пространство.

Любая помощь, пожалуйста ???