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

我正在创建一个EXT表单，该表单使用多个Panel组件，其中一个向左折叠。当它这样做时，右边的Panel（称为中心面板，因为虽然它在右边，但它有一个"中心"区域）和它的子项扩展。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]
});

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

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的样式，但鉴于我可以随时滚动，我认为这不会有什么不同，但如果我错了，请纠正我。

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

相关内容

最新更新

热门标签：