0

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

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

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

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

任何帮助将不胜感激！:)

4

1 回答 1

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);
})

请注意“布局：适合”添加到主内容和选项卡面板以及从 bodyPadding 到常规填充的更改（主体样式导致出现水平滚动条）。

编辑 要使窗口调整大小起作用，您需要告诉顶层 ext 组件窗口高度的变化。由于顶部的横幅不在代码中的任何位置，因此它无法知道屏幕上其他元素的大小或您希望布局管理器如何与它们交互。此外，当您将高度设置为像此处一样的静态值时，它不会尝试更改，因为它的容器发生了变化。但是，如果您在调整窗口大小时显式重置高度，则效果很好。

于 2012-11-07T15:50:10.133 回答