gpt4 book ai didi

javascript - ExtJS粘南面板

转载 作者:行者123 更新时间:2023-11-28 08:21:53 25 4
gpt4 key购买 nike

我正在使用 ExtJS 视口(viewport)边框布局。打造北、中、南区域。面临的第一个问题是视口(viewport)无法显示其内容的滚动条,因此我在视口(viewport)内使用了一个面板,并在其中添加了我想要的位置的面板:

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”面板。有用。请尝试一下。

关于javascript - ExtJS粘南面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22862976/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com