面板折叠时 extjs 3.4 滚动条消失

Question

我正在创建一个使用多个 Panel 组件的 EXT 表单，其中一个组件向左折叠。当它这样做时，右边的 Panel（称为 centrePanel，因为虽然它在右边，但它有一个 'center' 的区域）及其子项展开。 centrePanel 的直接子项是 Panel，如果 Panel 上的数据放不下，它们将被设置为滚动。我遇到的问题是，当我折叠左侧的 Panel 时，所有滚动条都会消失。扩张不会把他们带回来。但是需要注意两点：

我仍然可以使用鼠标在两个 Panel 中滚动。
在可折叠 Panel 折叠和展开一次并且所有滚动条消失后，当左侧 Panel 随后折叠时，其他面板上的滚动条再次短暂可见。折叠事件完成后，滚动条将不再可见。 Panel 再次展开时不会发生这种情况。

这里是相关代码。

可折叠 Panel（动态声明为 window 项目的一部分）：

         region: "west",
         width: "38%",
         title: "Filter",
         collapsible: true,
         items: [myFilterFormPanel],
         listeners:{
          collapse: function(panel){
              //Make centre panel and children wider when filter panel is collapsed.
              centrePanel.setWidth(1000);
              searchResultsPanel.setWidth(1000);
              myColumnModel.setColumnWidth(0, 540);
              myColumnModel.setColumnWidth(1, 165);
              myColumnModel.setColumnWidth(2, 165);
                },
          expand: function(panel){
             //Make centre panel and children wider when filter panel is collapsed.
             centrePanel.setWidth(659);
             searchResultsPanel.setWidth(659);
             myColumnModel.setColumnWidth(0, 200);
             myColumnModel.setColumnWidth(1, 90);
             myColumnModel.setColumnWidth(2, 90);
      }
  }

myFilterFormPanel:

var myFilterFormPanel = new Ext.FormPanel({
    border: false,
    id: windowId + "myfilter",
    items: [stationsPanel, datesPanel, daysPanel, impactPanel, searchButton]
});

centrePanel（包含可滚动但本身不可滚动的面板）：

var centrePanel = new Ext.Panel({
    border: false,
    items: [searchResultsPanel, individualResultPanel]
    }
});

searchResultsPanel（必要时可滚动）：

        var searchResultsPanel = new Ext.grid.GridPanel({
            title: "All Results",
            id: windowId + "allresults",
            region: "north",
            height: 250,
            border: false,
            padding: 10,
            autoScroll: true,
//            style:'overflow-y:auto',
            colModel: myColumnModel,
            store: myStore,
            listeners: {
                rowclick: function(thisRow, rowIndex){
                    //Display additional information in individual result panel.
                    var myData = myStore.getAt(rowIndex).data;
                    individualResultPanel.body.update("<h1><u>Summary</u></h1><p>" + myData.summary + "</p>"
                        + "<h1><u>Body</u></h1><p>" + myData.body + "</p>"
                        + "<h1><u>Additional Information</u></h1><p>" + myData.additionalInformation + "</p>"
                        + "<h1><u>Customer Information</u></h1><p>" + myData.customerInformation + "</p>"
                        + "<h1><u>Further Information</u></h1><p>" + myData.furtherInformation + "</p>"");
                }
            }
        });

individualResultPanel（也变得可滚动）；

var individualResultPanel = new Ext.Panel({
    border: false,
    autoScroll: true,
    title: "Selected Result",
    id: windowId + "individualresult",
    region: "south",
    height: 250,
    padding: 10,
});

在 searchResultsPanel 中，我尝试将样式设置为 overflow:auto;，这就是将 autoScroll 设置为 true 的效果，但这并没有改变任何东西。我还尝试减小其中一个可滚动 Panel 的宽度，但这也没有任何区别。我考虑过在可折叠 Panel 折叠时动态更改可滚动 Panel 的样式，但考虑到我始终可以滚动，我认为这不会有什么不同，但如果我是，请纠正我错了。

Answer 1

我设法解决了这个问题，但是通过更改我在原始问题中没有提供的代码。我在可折叠 Panel 上设置了 expand 和 collapse 监听器，这样当这些事件被触发时，我手动设置 Panel 组件的宽度（使用硬编码值）并且，对于 GridPanel，我还设置了 GridPanel 的 ColumnModel 中的列宽。删除这些代码行允许滚动条在可折叠 Panel 折叠和展开时保留。

面板折叠时 extjs 3.4 滚动条消失

extjs 3.4 scrollbar disappears when panel collapses

javascript

css

extjs

scrollbar

extjs3