Sencha touch中内容溢出时如何启用列表滚动

Question

我有一个视图，它采用 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;' 设置为在父级中列出配置，但这没有用。

我只想在列表溢出可用空间时启用滚动。

请帮忙？？？

Answer 1

对此没有内置机制，您需要自己实现。除非您有其他自定义列表设置（例如 variableHeight），否则实际上并不难。我整理了一个快速的 Sencha Fiddle，展示了它是如何工作的。

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