我正在使用ExtJS视口边框布局。为了创建北部,中部和南部区域。面临的第一个问题是,视口无法为其内容显示滚动条,因此我在视口中使用了一个面板,并在其中添加了面板,并添加了所需的位置:
Ext.create('Ext.container.Viewport', {
id: 'viewportContainer',
layout: {
type: 'border',
align: 'center'
},
forceFit: 'true',
items : [{
layout:'anchor',
scroll:true,
autoScroll:true,
region : 'center',
xtype : 'panel',
items : [ {
region: 'north',
xtype: 'panel',
bodyStyle: {
'background': 'none'
},
items: [upperPanel, messagePanel()]
},{
layout:'anchor',
form: searchForm.id,
id: 'innerBody',
region : 'center',
xtype : 'panel',
items : [searchForm, gridPanel ]
} ,{
region: 'south',
xtype: 'panel',
items: [bottomPanel]
} ]
} ]
}
我想做的是
将bottomPanel粘贴到页面底部,如果其他
内容短于可见区域(clientHeight)和
如果它们较高,则将页脚位于innerBody部分的正下方。
当前实现将页脚放置在innerBody面板的正下方,但是当页面的所有内容都短于可见区域(clientHeight)时,脚注不会停留在底部
任何帮助将不胜感激!
谢谢
最佳答案
我正在执行以下代码,请检查一下。
我的代码:
Ext.create('Ext.container.Viewport', {
id: 'viewportContainer',
layout: {
type: 'border',
align: 'center'
},
forceFit: 'true',
items : [{
layout:'anchor',
scroll:true,
autoScroll:true,
region : 'center',
xtype : 'panel',
items : [ {
region: 'north',
xtype: 'panel',
bodyStyle: {
'background': 'none'
},
items: [upperPanel, messagePanel()]
},{
layout:'anchor',
form: searchForm.id,
id: 'innerBody',
region : 'center',
xtype : 'panel',
minHeight:'540',
items : [searchForm, gridPanel ]
} ,{
region: 'south',
xtype: 'panel',
items: [bottomPanel]
} ]
} ]
}
我只是将'minHeight'属性应用于'innerBody'面板。有用。请尝试一下。