Question

重现的来源和问题的描述可以在github上找到：https://github.com/romacafe/extjs_4.1.1_scrollIssue

我正在尝试在选项卡面板中创建一个带有2个'无限网格'的extjs 4.1.1（GPL版本）应用程序，嵌套在边框布局中。

我可以渲染非缓冲（非无限）网格，但没有滚动条。
当我配置网格并存储无限滚动（缓冲存储，网格上的verticalScroller配置）时，它根本不会呈现任何数据。
总的来说，当我调整窗口大小时，整个布局不会调整大小。

应用程序呈现给div，而不是文档正文。这对我很重要，但可能会导致这个问题。我在引用的github存储库中完全重现了这个问题。

非常感谢任何帮助！：）

Answer 1

我认为您的问题在于未能为父容器指定布局，这允许您的选项卡面板的主体无限延伸。这可以防止网格从布局中获得定义的高度/宽度，并在缓冲网格中生成零高度网格，以及一个网格，可以扩展其高度以包含静态网格的所有记录。这是在app.js的中心面板定义中对我有用的东西：

//Store a reference to the main element that you create and add the to application div
ScrollIssue.element = Ext.create('Ext.container.Container', {
    renderTo: 'application',
    height: windowHeight,
    layout: 'border',
    bodyBorder: true,
    defaults: {
        bodyPadding: 5
    },
    items: [
        {
            title: 'Filters',
            region:'north',
            floatable: false,
            margins: '5 0 0 0',
            height: 150,
            minHeight: 150,
            maxHeight: 150,
            collapsible: true,
            collapsed: true,
            html: 'filters would go here'
        },
        {
            title: 'Main Content',
            region: 'center',
            margins: '5 0 0 0',
            //Add a layout here
            layout: 'fit',
            items: [
                Ext.widget(
                    'tabpanel', {
                        activeTab: 0,
                        plain: true,
                        //Add a layout here
                        layout: 'fit',
                        //Change this to regular padding
                        defaults: {padding: 10},
                        items: [
                            {
                                title: "Static",
                                xtype: 'staticGrid'
                            },
                            {
                                title: "Buffered",
                                xtype: "bufferedGrid"
                            }
                        ]
                    }
                )
            ]
        },
        {
            title: 'Detail',
            region: 'south',
            height: 150,
            minHeight: 100,
            maxHeight: 250,
            html: 'Detail Panels',
            collapsible: true
        }
    ]
});

//Listen to the window resize event and reset the height to
// 50 pixels less than the total viewport height to account
// for the banner above
Ext.EventManager.onWindowResize(function(w, h) {
    ScrollIssue.element.setHeight(h - 50);
})

请注意，“主要内容”和“选项卡”面板中添加了“layout：fit”以及从bodyPadding到常规填充的更改（正文样式会导致出现水平滚动条）。

修改要使窗口大小调整起作用，您需要告诉顶级ext组件窗口高度的变化。由于顶部的横幅不在代码内的任何位置，因此无法知道屏幕上其他元素的大小或您希望布局管理器与它们进行交互的方式。此外，当您将高度设置为静态值时，它不会像容器更改那样尝试更改。如果在调整窗口大小时显式重置高度，则可以正常工作。

网格中缺少滚动条，缓冲网格中缺少数据，布局不会调整大小

1 个答案: