полоса прокрутки для окна просмотра 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

Прокрутка в области просмотра отключена платформой.Если вы думаете об этом, это побеждает цель наличия окна просмотра.Просто замените его на обычную панель, и все готово.Альтернатива состоит в том, чтобы иметь реальный випорт и вставить в него панель.Установите макет vieport, чтобы соответствовать.Если вы сделаете это, то панель будет прокручиваться внутри области просмотра, что почти то же самое - снова побеждать цель области просмотра.

Из документов : "В окне просмотра не предусмотрена прокрутка, поэтому дочерние панели в окне просмотра должны обеспечивать прокрутку, если это необходимо, с помощью конфигурации autoScroll."

Answer 2

Попробуйте следующее:

viewConfig:
{
    autoScroll: true
}

Answer 3

хотя viewport не поддерживает autoScroll=true, но мы все равно можем использовать его, вручную задав ширину дочерней панели mainCenterPanel по размеру, что заставляет viewport показывать содержимое при прокрутке.

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