どうすれば縦スクロールパネルをスクロールできますか

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: [ 
     {...