scroll bar for ExtJs viewport

Question

I need a scroll bar for ExtJs viewport, remark autoScroll=true doesn't work as viewport doesn't support scrollbar. So maybe I need some outer container which will enable scrolling for whole viewport.

The sample code is as:

layoutPanel = new Ext.Viewport({
            layout: 'border',
            border: false,
            items: [
               new Ext.Panel({
                  id: 'mainCenterPanel',
                  region: 'center',
                  border: false,
                  layout: 'border',
                  items: [
                     new Ext.Panel({
                        id: 'configPanelContainer',
                        region: 'north',
                        border: false,
                        height: 50,
                        layout: 'border',
                        items: [
                           new Ext.Panel({
                              region: 'north',
                              border: false,
                              contentEl: 'filterBar',
                              bodyStyle: 'padding:20px 20px 20px 20px'
                           }),
                           new Ext.Panel({
                              region: 'center',
                              layout: 'fit',
                              border: false,
                              bodyStyle: 'padding:0px 20px 20px 20px',
                              items: heatMapConfigsPanel
                           })
                        ]
                     }),
                     new Ext.Panel({
                        id: 'heatmapChartPanel',
                        region: 'center',
                        border: false,
                        contentEl: 'analysisContainer',
                     })
                  ]
               })
            ]
         }); 

Answer 1

though viewport doesn't support autoScroll=true, but we can still use it by manually setting width for child panel mainCenterPanel on re size, which forces viewport to show the content by scroll.

layoutPanel = new Ext.Viewport({
            layout: 'border',
            border: false,
            autoScroll: true,
            items: [
               <s:if test="%{isExternalView != true}">
               new Ext.Panel({
                  region: 'north',
                  contentEl: 'bottomTbl',
                  border: false,
                  height: 37
               }),
               </s:if>
               mainCenterPanel = new Ext.Panel({
                  id: 'mainCenterPanel',
                  region: 'center',
                  border: false,
                  layout: 'border',
                  bodyStyle: 'overflow-y: no;',
                  items: [
                     new Ext.Panel({
                        id: 'configPanelContainer',
                        region: 'north',
                        border: false,
                        height: 50,
                        layout: 'border',
                        items: [
                           new Ext.Panel({
                              region: 'north',
                              border: false,
                              contentEl: 'filterBar',
                              bodyStyle: 'padding:20px 20px 20px 20px'
                           }),
                           new Ext.Panel({
                              region: 'center',
                              layout: 'fit',
                              border: false,
                              bodyStyle: 'padding:0px 20px 20px 20px',
                              <s:if test="%{!licenseWatermarkEmpty}">bodyCssClass: '${licenseWatermark}',</s:if>
                              items: heatMapConfigsPanel
                           })
                        ]
                     }),
                     new Ext.Panel({
                        id: 'heatmapChartPanel',
                        region: 'center',
                        border: false,
                        contentEl: 'analysisContainer',
                        listeners: {
                           scope: this,
                           resize: function(p, adjWidth, adjHeight, rawWidth, rawHeight) {
                              if ((p.getInnerWidth() < layoutPanelMinWidth) ||
                                 (p.getInnerHeight() < layoutPanelMinHeight)) {
                                 mainCenterPanel.setWidth(layoutPanelMinWidth);
                                 mainCenterPanel.setHeight(mainCenterPanel.getHeight() - 20);
                                 return;
                              }
                           }
                        }
                     })
                  ]
               })
            ]
         });

Answer 2

Scrolling on the viewport is disabled by the framework. If you think about it this defeats the purpose of having a viewport. Just replace it with a regular panel and you are all set. The alternative is to have an actual vieport and embed a panel in it. Set the layout of vieport to fit. If you do that then the panel will scroll inside the viewport which is almost the same thing - again defeating the purpose of a viewport.

From the docs: "The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config."

Answer 3

Try the following:

viewConfig:
{
    autoScroll: true
}