1

我有以下容纳我的应用程序的视口...

Ext.define('my.view.Viewport', {
    extend: 'Ext.Viewport',
    id: 'viewport',
    layout: 'border',
    autoDestroy: true,


    initComponent: function() {
        this.items = [
            {xtype: "widget.HeaderContainer"},
            {xtype: "widget.BodyContainer"},
            {xtype: "widget.FooterContainer"}
        ];
        this.callParent(arguments);
    }
});

当浏览器窗口调整大小时，所有组件都很好地填充了空间，但是当窗口低于 1024x768 时，我希望出现滚动条。视口中的所有组件都应该像窗口是 1024x768 一样绘制（如果窗口视图再次大于 1024x768，然后消失）

希望这是有道理的。可能是一些简单的事情，但我无法找到一种方法来做到这一点而不会太麻烦。

感谢您的建议

4

3 回答 3

2

根据 Ext Docs：视口不提供滚动，因此视口中的子面板应在需要时使用 autoScroll 配置提供滚动。

您必须注意构造函数或 initComponent 上每个组件的大小，并执行类似的操作

constructor:function(config){
    var config= Ext.apply({},config,{    
        autoscroll:((window.innerWidth<1024) && window.innerHeight < 768))?true:false
})
于 2012-08-01T20:01:31.973 回答
0

这是我所做的：将页眉和页脚高度固定为特定的 px 值。中心区域有一个带有 layout=fit 的容器（尽管这不是必需的）。此容器将主应用程序视图作为一个项目获取，这意味着该视图将填充视口分配给它的任何空间。放入中心区域容器的视图的 autoScroll 属性设置为 true，并且不会指定高度或宽度。它也不是子组件。这是一个http://jsfiddle.net/dbrin/UqfFH/

于 2012-08-01T21:32:19.963 回答
0

执行此操作的正常方法是在视口childrenminHeight上使用和配置。minWidth

您还必须确保将autoScroll: true配置包含在孩子身上。

例如：对于这些中的每一个：

this.items = [
    {xtype: "widget.HeaderContainer"},
    {xtype: "widget.BodyContainer"},
    {xtype: "widget.FooterContainer"}
];

一个简单的minWidth: 1024配置就可以了。

根据您的和是否为静态高度，minHeight配置会有点棘手。HeaderContainerFooterContainer

如果它们是，那么您可以简单地minHeight在BodyContainer其上包含一个相当于768 - staticHeaderHeight - staticFooterHeight.

如果您希望页眉或页脚也可以单独调整大小（它们不是静态大小），您将不得不通过在其中一个兄弟姐妹的高度发生变化时重置最小尺寸来跳过一些环节。

于 2012-08-01T22:25:50.097 回答