我如何垂直滚动在sencha触摸面板

下面是我的看法，其中我想垂直滚动除了“betsFooter”面板。在这个视图中，我在“activeBetOptionsPanel”面板下动态添加一些按钮。之后动态添加的按钮隐藏在“betsFooter”面板后面，我想让它可以滚动，除了页脚。我试图添加滚动：true和autoScroll：true，但它不能正常工作。我如何垂直滚动在sencha触摸面板

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' 
        } 
       ] 
      } 
    ] 
}

}）;

来源

2017-05-04 Kalashir

尝试使用overflowY：“自动”，而不是滚动相关既configs.Hope它works.Test相同并回复我使用煎茶触摸 – Tejas

所以汽车将无法正常工作 – Kalashir

，你已经给这些滚动CONFIGS应面板比ID为“wagerResponseMessage”的直接子面板的高度小。在这种情况下，只有滚动会出现。 – Tejas

将高度添加到可滚动面板。

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

来源

2017-08-29 19:24:34

我如何垂直滚动在sencha触摸面板

回答

相关问题