我如何在sencha touch中垂直滚动面板

Question

以下是我的视图，除了“betsFooter”面板之外，我正在尝试垂直滚动。在这个视图中，我在“activeBetOptionsPanel”面板下动态添加了一些按钮。然后动态添加的按钮隐藏在“betsFooter”面板后面，我想让它除了页脚之外可以滚动。 我尝试添加 scrollable: true 和 autoScroll:true 但它无法正常工作。

Ext.define('DigitalApp.view.Bets.WagerResponse', {
extend: 'Ext.Container',
xtype: 'WagerResponse',
config: {
    id: 'wagerResponseView',
    layout: 'fit',
    items: [
            {
                xtype: 'panel',
                scrollable:true,
                autoScroll: true,
                layout: 'vbox',
                items: [
                {
                    xtype: 'panel',
                    id: 'wagerResponseMessage',
                    layout: 'hbox',
                    type: 'wagerBetResponse',
                    items: [
                        {
                            xtype: 'label',
                            type: 'success',
                            hidden: true,
                            id: 'wagerSuccessMessage',
                            html: '<div class="wagerResponse"><div class="wagerResponseIcon"></div>Your bet has been placed <br>successfully!</div>',
                            flex: 1
                        },          
                        {
                            xtype: 'label',
                            type: 'cancel',
                            hidden: true,
                            id: 'wagerCancelMessage',
                            html: '<div class="wagerResponse"><div class="wagerResponseIcon"></div>Bet Cancelled</div>',
                            flex: 1
                        }
                    ],
                    setSuccessful: function(success) {
                        if(!success){
                            this.getInnerItems()[0].hide()
                            this.getInnerItems()[1].show()
                        }
                    }
                },
                {
                    xtype: 'panel',
                    id: 'betCard',
                    layout: 'vbox',
                    tpl: new Ext.XTemplate(
                        '<div class="infoCard">'+
                        '<img class="betsHeader" src="resources/images/logo-drfBets.png" /><hr>' +
                        '<span id="wagerRaceDate">{raceDate:this.formatDate()}</span>' +
                        '</div>' +
                        '<div class="totalCard">Total ${totalAmount}</div>',
                        {
                            formatDate: function(raceDate){
                                var date = Ext.Date.parse(raceDate, 'm-d-Y');
                                return Ext.Date.format(date, 'd F Y');
                            },

                            boxString: function(box){
                                return box ? 'Box' : '';
                            }
                        }
                    ),
                    items: [
                        {
                           xtype: 'panel',
                           type: 'cancelPanel',
                           id: 'cancelPanel'
                        }
                    ]
                },
                {
                  xtype: 'panel',
                  type: 'activeBetOptionsPanel',
                  name: 'activeWagers',
                  title: 'betOptions',
                  layout: 'vbox',
                  cls: 'navigationBetPanel',
                  items: [
                    {
                        xtype: 'button',
                        type: 'viewMyBets',
                        hidden: false,
                        id: 'viewBets',
                        html: '<div>View My Bets</div>'
                    },
                    {
                        xtype: 'panel',
                        cls: 'watchPanelVideo',
                        type: 'watchPanelVideo'
                    }
                  ]
                }

                ]
            },
            {
                xtype: 'panel',
                type: 'betsFooter',
                cls: 'wagerFooter',
                id: 'placeWager',
                items: [
                    {
                        xtype: 'panel',
                        cls: 'betsLogo footerLogo'
                    },
                    {
                        xtype: 'button',
                        cls: 'wagerButton',
                        id: 'newBetButton',
                        html: "+"
                    },
                    {
                        xtype: 'label',
                        type: 'accountBalance',
                        id: 'accountBalance'
                    },
                    {
                        xtype: 'label',
                        type: 'serialNo',
                        id: 'serialNo'
                    }
                ]
            }
    ]
}

});

Answer 1

为可滚动面板添加高度。

 xtype: 'panel',
 height: 600,
 scrollable:{
         direction: 'vertical'
 },
 items: [
       {...