Internet explorer ExtJS GridPanel滚动条不会出现在IE7中，但会出现在Firefox中，等等 安装程序

我有一个手风琴布局，包含一个“属性”面板，嵌套两个内部面板。第一个内部面板包含一个

Ext.DataView

，而第二个面板是所讨论的

Ext.grid.GridPanel

。在下面的屏幕截图中，包含文件夹图标的空白区域是dataview，下面是gridpanel

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

问题 在Firefox、Chrome和Opera中，当我的gridpanel属性溢出时，会出现一个滚动条。只有在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();

---

如果您能帮助我们朝着正确的方向前进，我们将不胜感激。谢谢。

如果调整/隐藏/显示面板，是否会显示滚动条？如果是这样，这可能是一个布局问题。如果不是，则可能是布局有问题（或者可能是Ext错误）。很难从你的帖子中看出什么。你在Ext论坛上问过吗

---

对于这样的事情，我通常会尝试系统地将代码缩减到尽可能小的布局，以显示问题。如果确实是某种配置问题，这通常会导致人们发现自己的问题。但至少（因为您的示例在除IE之外的所有应用程序中都有效，配置可能很好），它将使其他人更容易查看并尝试重现此问题。

我解决此问题的方法是从我的gridpanel配置中删除

autoWidth:true

。相反，我手动设置了一个宽度值，并在属性面板的主体上使用函数更改gridpanel的高度和宽度。下面是我修改过的代码，以及当属性面板的宽度和高度更改时手动设置gridpanel大小的函数

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

});

---

谢谢大家的帮助

我确信我找到了更好、更简单的解决方案。只需将

宽度

和

高度

设置为

'100%

，如下所示：

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

创建

Ext.grid.Panel

时

---

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

你有没有可能为这个片段发布生成的HTML/CSS？同意“削减代码”。如果可以，请将此组件拉入一个独立的html文件中。然后开始删除配置-从高度开始。你会很快发现它是什么。谢谢bmoeskau，似乎问题出在我的配置上。虽然我没有削减代码，但我确实削减了代码，回到了这个网格面板所属的手风琴布局。在阅读了accordionlayout的文档后，特别是在autoWidth配置上，它指出在autoWidth设置为true时，某些组件将无法正常工作，grid就是一个例子。我从gridpanel中删除了autoWidth配置，并手动设置了一个宽度值。我还添加了一个函数，可以在检测到调整大小时设置gridpanel的大小。