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

Question

我正在创建一个使用多个 Panel 组件的 EXT 表单，其中一个组件向左折叠。当它这样做时，右侧的 Panel(称为 centrePanel，因为虽然它在右侧，但它有一个“中心”区域)及其子项展开。 centrePanel 的直接子级是 Panel，如果其上的数据无法容纳在 Panel 中，则它们已设置为滚动。我遇到的问题是，当我折叠左侧的 Panel 时，所有滚动条都会消失。扩张不会把他们带回来。但是需要注意两点:

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

这是相关代码。

可折叠面板(动态声明为窗口元素的一部分):

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

我的过滤器表单面板:

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 时保留滚动条。