我有一个带有边框布局的容器的ExtJS视口,我想让中心区域的容器支持水平滚动。这就是代码现在的样子(这是Rails应用程序的一部分,所以请原谅提供一些内容的ERB代码):
var viewport = Ext.create('Ext.container.Viewport', {
defaultType: 'container',
layout: 'border',
items: [
{
defaultType: 'container',
minWidth: 800,
region: 'north',
items: [
<%= render "shared/header" %>
,<%= render "shared/title_bar" %>
]
},{
defaultType: 'container',
minWidth: 800,
region: 'center',
autoScroll: true,
items: [
<%= ext_site_flash_panel(:alert, flash[:site_alert]) %>,
<%= ext_site_flash_panel(:notice, flash[:site_notice]) %>,
<%= ext_flash_panel(:alert, flash[:alert]) %>,
<%= ext_flash_panel(:notice, flash[:notice]) %>,
{
defaultType: 'container',
margin: '20 20 20 20',
defaults: {
margin: '0 0 15 0'
},
items: [
<% if content_for?(:top_section) %>
<%= yield :top_section %>,
<% end %>
<%= content_for?(:main_content) ? yield(:main_content) : yield %>
]
},{
id: 'footer',
defaultType: 'container',
padding: '10 0 10 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [
{
html: '<%= escape_javascript(render 'shared/copyright') %>'
}
]
}
]
}
]
});
我期望的行为是,当窗口的大小使得中心容器的宽度小于800像素时,它将变得可滚动。相反,它只是从屏幕的一侧掉下来而不允许我滚动到它,虽然它仍然渲染,好像窗口有800像素以适应内容。将autoScroll
设置为true只会确保我们可以在内容对于窗口太大时垂直滚动。
我怎样才能获得理想的行为?
注意:尝试在this very similar question提到的解决方案,但它似乎不起作用。
一种解决方案是将中心区域包装在具有适合布局的另一个容器中,并在此新容器上设置autoScroll
。
{
defaultType: 'container',
layout: 'fit',
region: 'center',
autoScroll: true, // WARNING: deprecated since v5.1.0 (use scrollable)
scrollable: true, // v5.1.0+
items: [ /* your current center panel goes here */ ]
}
我不得不与Krzysztof的解决方案略有不同。
在Ext JS v6 +中需要在中心区域的面板上指定scrollable: true
。
{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'toolbar',
region: 'north',
items: ['->', {
xtype: 'button',
text: 'Update'
}]
}, {
defaultType: 'container',
layout: 'fit',
region: 'center',
items: [{
xtype: 'panel',
scrollable: true, // scrollable center panel
items: [ /* center panel content */ ]
}]
}]
}