ExtJS GridPanel 滚动条不会出现在 IE7 中，但会出现在 Firefox 等中

Question

设置

我有一个手风琴布局，其中包含一个嵌套两个内部面板的“属性”面板。第一个内部面板包含一个 Ext.DataView，而第二个面板是所讨论的 Ext.grid.GridPanel。在下面的屏幕截图中，包含文件夹图标的空白区域是数据视图，其下方是网格面板。

问题

在 Firefox、Chrome 和 Opera 中，当我的网格面板属性溢出时，会出现一个滚动条。仅在 Internet Explorer 中不会出现。但是，我可以在所有浏览器（包括 IE）中使用鼠标滚动按钮进行滚动。

我也尝试删除我们的自定义 css 文件，以防它以某种方式影响它，但没有任何变化这样做。

我不确定应该显示什么代码，因为我不知道确切的问题来自哪里，但这是主面板和网格面板的代码。

var mainPanel = new Ext.Panel({
    id : 'main-property-panel',
    title : 'Properties',
    height : 350,
    autoWidth : true,
    tbar : [comboPropertyActions],
    items : [panel1] //panel1 holds the DataView
});

var propertiesGrid = new Ext.grid.GridPanel({
    stripeRows : true,
    height : mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight(),
    autoWidth : true,
    store : propertiesStore,
    cm : propertiesColumnModel
})

//Add gridpanel to mainPanel
mainPanel.add(propertiesGrid);
mainPanel.doLayout();

任何朝着正确方向的帮助将不胜感激。谢谢。

Answer 1

我对这个问题的解决方案是从我的 gridpanel 配置中删除 autoWidth : true 。相反，我手动设置宽度值，并使用一个函数在属性面板主体调整大小时更改网格面板的高度和宽度。下面是我修改后的代码以及当属性面板的宽度和高度发生变化时手动设置网格面板大小的函数。

var propertiesGrid = new Ext.grid.GridPanel({

    stripeRows : true,
    height : mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight(),
    width : mainPanel.getSize().width,
    store : propertiesStore,
    cm : propertiesColumnModel

})

//Add gridpanel to mainPanel
mainPanel.add(propertiesGrid);
mainPanel.doLayout();

mainPanel.on('bodyresize', function() {

    //propertiesGrid.setSize(Width, Height);
    propertiesGrid.setSize(mainPanel.getSize().width, 
    mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight());

});

感谢大家的帮助！

Answer 2

如果调整大小/隐藏/显示面板，滚动条是否会出现？如果是这样，则可能是 IE hasLayout 问题。如果不是，则可能是您的布局存在问题（或者可能是 Ext bug）。从您发布的内容中很难看出任何内容。您在 Ext 论坛上提问过吗？

对于这样的事情，我通常会尝试系统地将代码削减回仍然显示问题的最小可能布局。如果确实是某种配置问题，这通常会导致人们发现自己的问题。但至少（因为你的示例确实可以在除 IE 之外的所有平台上运行，所以配置可能没问题），这将使其他人更容易查看并尝试重现该问题。

Answer 3

我确信我已经找到了更好、更简单的解决方案。只需将 width 和 height 设置为 '100%' 即可：

width: '100%',
height: '100%'

在创建 Ext.grid.Panel 时。

我回答这个老问题是因为这是你在谷歌搜索时得到的第一个问题。