ExtJs视口的滚动条 [英] scroll bar for ExtJs viewport

问题描述

我需要一个用于ExtJs视口的滚动条，注释 autoScroll = true 不起作用，因为视口不支持滚动条。所以也许我需要一些外部容器，这将允许滚动整个视口。

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.

示例代码如下：

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',
                     })
                  ]
               })
            ]
         }); 

推荐答案

虽然视口不支持 autoScroll = true ，但是我们仍然可以通过手动设置子面板mainCenterPanel的宽度来重新使用尺寸，这会强制视口滚动显示内容。

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;
                              }
                           }
                        }
                     })
                  ]
               })
            ]
         });

这篇关于ExtJs视口的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！