Question

我正在创建一个使用多个Panel组件的EXT表单，其中一个组件向左折叠。当它这样做时Panel在右边（称为centrePanel，因为虽然它在右边它有一个区域＆＃39; center＆＃39;）并且它的孩子会扩展。 centrePanel的直接子项Panel已被设置为滚动，如果它们上的数据不适合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);
      }
  }

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

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

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

1 个答案: