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

尝试以下方法：

viewConfig:
{
    autoScroll: true
}

Answer 2

框架禁用在视口上滚动。如果你考虑一下，这就违背了拥有视口的目的。只需将它替换为常规面板即可。另一种方法是拥有一个实际的视频并在其中嵌入一个面板。设置vieport的布局以适应。如果你这样做，那么面板将在视口内滚动，这几乎是相同的事情 - 再次击败了视口的目的。

来自docs： “视口不提供滚动功能，因此视口中的子面板应根据需要使用autoScroll配置进行滚动。”

Answer 3

虽然视口不支持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;
                              }
                           }
                        }
                     })
                  ]
               })
            ]
         });

ExtJs视口的滚动条

3 个答案: