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

Posted 2023-02-25

【中文标题】我如何在sencha touch中垂直滚动面板

【英文标题】：How can i vertically scroll panel in sencha touch

【发布时间】：2017-05-04 09:57:20

【问题描述】：

以下是我的视图，除了“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'
                    
                ]
            
    ]

);

【问题讨论】：

尝试使用 overflowY:'auto' 而不是滚动相关的两个配置。希望它有效。测试相同并回复

我正在使用 sencha touch，所以自动无法工作

您提供这些滚动配置的面板的高度应低于其直接子面板的高度，ID 为“wagerResponseMessage”。在这种情况下，只会滚动。

不，它不起作用，它是可滚动的，但又回到了旧状态。

你能分享一些小提琴吗？我会检查一下chrome扩展。给我一些小提琴这个例子

【参考方案1】：

为可滚动面板添加高度。

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