extjs 3.4 scrollbar disappears when panel collapses

Question

I am creating an EXT form that uses several Panel components, one of which collapses to the left. When it does so The Panel on the right (called centrePanel, because although it's on the right it has a region of 'center') and its children expand. The immediate children of centrePanel are Panels that have been set to scroll if the data on them cannot fit on the Panel. The problem I am experiencing is that when I collapse the Panel on the left, any scrollbars disappear. Expanding does not bring them back. However two things to note are:

I can still scroll in both Panels using my mouse.
After the collapsible Panel has been collapsed and expanded once and any scrollbars disappear, when the left Panel is subsequently collapsed the scrollbar on the other panels briefly becomes visible again. Once the collapse event has finished the scrollbars are no longer visible. This does not happen when the Panel is expanded again.

Here is the relevant code.

Collapsible Panel (declared on the fly as part of the items of the 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 (contains panels that are scrollable but is not scrollable itself):

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

searchResultsPanel (this becomes scrollable when necessary):

        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 (also becomes scrollable);

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

In the searchResultsPanel I tried setting the style to be overflow:auto; which is what setting autoScroll to true does anyway but this didn't change anything. I also tried reducing the width of one of the srollable Panels but this also made no difference. I thought about dynamically changing the style of the scrollable Panels when the collapsible Panel is collapsed but given that I can always scroll, I don't think this will make a difference but correct me if I am wrong.

It would be good if you could provide a fiddle so that we can play around with it a little. But otherwise.. Good post — Scriptable

user1849060 user1849060 · Accepted Answer · 2015-01-17T11:10:17

I managed to solve this problem but by changing code that I did not supply in my original question. I had set expand and collapse listeners on the collapsible Panel so that when these events were fired, I was manually setting the widths of the Panel components (using hardcoded values) and, for the GridPanel, I was additionally setting the width of the columns within the GridPanel's ColumnModel. Removing these lines of code allowed the scrollbars to remain when the collapsible Panel was collapsed and expanded.

extjs 3.4 scrollbar disappears when panel collapses

1 Answers