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

Posted 2023-02-26

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

【英文标题】：Scrollbars missing from grid, data missing from buffered grid, layout doesn't resize

【发布时间】：2012-11-06 23:40:13

【问题描述】：

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

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

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

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

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

【参考方案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 组件窗口高度的变化。由于顶部的横幅不在代码中的任何位置，因此它无法知道屏幕上其他元素的大小或您希望布局管理器如何与它们交互。此外，当您将高度设置为像这里一样的静态值时，它不会随着容器的变化而尝试改变。但是，如果您在调整窗口大小时明确重置高度，则效果很好。

【讨论】：

看起来这样解决了前两个问题，相信我把它放到我的实际项目中也会看到类似的结果。非常感谢！当我调整窗口大小时，布局仍然没有调整大小，对此有什么想法吗？我的期望是否超出预期？

请看代码的编辑和底部的解释。