sencha-touch - 如何为此以下叠加层启用滚动条

Question

el.overlay = Ext.create('Ext.Panel', {
                                    itemId:'widgetInfoPanel',
                                    html: htmlText,
                                    height: 200,
                                    width: 300,
                                    autoScroll:true,
                                    modal: {
                                        style: 'opacity: 0'
                                    },
                                    hideOnMaskTap:true,
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: "Close".toUpperCase(),
                                            cls: 'button-orange',
                                            listeners: {
                                                tap: function (button) {
                                                    el.overlay.hide();
                                                }
                                            }
                                        }
                                    ]
                                });

正如您所看到的，这是一个在单击按钮时创建的简单叠加层，但是当 html 内容太长时，它应该显示一个滚动条，因为我已将 autoScroll 属性设置为 true，但我没有看到。

我如何启用它，我正在使用 sencha touch

Answer 1

我不确定为什么会遇到这个问题，但正如@Sujata Chanda 建议的那样，将“autoScroll”替换为“scrollable”可以解决问题。

这是演示：

• 应用程序.js：

  Ext.application({ name: 'Demo', views: ['Main'],

  launch:function() {
      var mainView = Ext.create('Demo.view.Main');
      //Ext.Viewport.add(mainView);
      var overlay = Ext.create('Ext.Panel', {
          itemId:'widgetInfoPanel',
          html: 'Hellllllloooojsdghaaaassssasdasdasdasdasdasdasfasfjgasjfasgfjasgfhasgfhjasgfhasgfjhasgfhdgfhjgasfjkagsfadsgfjhkdsagfjkaegfuywegfkjsadgfuwegfjaesgfiouwerhiuwegrowergiuweghfksjdbfsudiyriuweahbrkjewhabfuweyuiwehiuewhiuuuuudhfudsfhdsufjsdhgfuwiaegfdjsbfiuweagiwejhiuewriewougrhoiweuqgioweuagfiuadsgfuagsefwaeygruyaeygsfuaeisdgfaksdjfgkasdjgfksdjagfksjadhfgewuygfjksdhbfuaegsyfajkhsgfuywegfbjkhsaegrou8weybfkuwegr',
          height: 200,
          width: 300,
          scrollable:true,
          modal: {
              style: 'opacity: 0'
          },
          hideOnMaskTap:true,
          items: [
              {
                  xtype: 'button',
                  text: "Close".toUpperCase(),
                  cls: 'button-orange',
                  listeners: {
                      tap: function (button) {
                        overlay.hide();
                      }
                  }
              }
          ]
      });
      Ext.Viewport.add(overlay);
      overlay.show();
  
  }
  

  });

在浏览器中检查这个！