Question

我有以下Viewport来容纳我的应用程序......

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则会消失）

希望这是有道理的。可能是一些简单的事情，但如果没有太多的错误，我找不到办法做到这一点。

感谢您的建议

Answer 1

根据Ext Docs：The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.

您必须在构造函数或initComponent上查看每个组件的大小，并执行类似

的操作

constructor:function(config){
    var config= Ext.apply({},config,{    
        autoscroll:((window.innerWidth<1024) && window.innerHeight < 768))?true:false
})

Answer 2

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

Answer 3

执行此操作的常规方法是在视口子项上使用minHeight和minWidth配置。

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

例如：每一个：

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

一个简单的minWidth: 1024配置可以正常工作。

minHeight配置会有点棘手，具体取决于您的HeaderContainer和FooterContainer是否为静态高度。

如果是，那么您只需在minHeight上添加BodyContainer配置，该配置相当于768 - staticHeaderHeight - staticFooterHeight。

如果您希望页眉或页脚也可单独调整大小（它们不是静态大小），则只要其中一个兄弟姐妹的身高发生变化，您就必须通过重置最小尺寸来跳过一些箍。

如何将条件滚动添加到extjs视口

3 个答案: