ExtJs視窗的滾動條

Question

我需要ExtJs視窗的滾動條，備註autoScroll=true不起作用，因爲視窗不支持滾動條。所以也許我需要一些外部容器來啓用整個視口的滾動。

的示例代碼：

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

儘管視口不支持autoScroll=true，但我們仍然可以通過手動設置子面板mainCenterPanel的寬度來使用它，這將強制視口通過滾動顯示內容。

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

嘗試以下方法：

viewConfig: 
{ 
    autoScroll: true 
} 

Answer 3

滾動視口是由框架禁用。如果你考慮一下，這會失去視口的目的。只需將其替換爲常規面板，即可完成設置。另一種方法是有一個實際的vieport並在其中嵌入面板。設置vieport的佈局以適應。如果你這樣做，那麼面板將在視口內滾動，這幾乎是相同的事情 - 再次挫敗視口的目的。

從docs： 「視口不提供滾動，因此如果需要使用autoScroll配置，視口內的子面板應提供滾動。」