어떻게 수직으로 패널을 스크롤 할 수 있습니까?

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