以下是我的观点,我试图垂直滚动,除了" 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'
}
]
}
]
}
});
答案 0 :(得分:0)
为可滚动面板添加高度。
xtype: 'panel',
height: 600,
scrollable:{
direction: 'vertical'
},
items: [
{...