Question

我正在使用ext js 5.0.0，需要使用iframe来显示一些外部链接。但是我无法在Ipad中滚动它，对于其他浏览器来说，它可以正常工作并且可以滚动。

有趣的是，即使对于iPad，如果我将iframe显示在单个面板中（如下面的代码所示），它也可以工作。

    <!DOCTYPE html>
<html>
   <head>
      <link href = "js/frameworks/ExtJS/ext-5.0.1/resources/ext-theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" src = "js/frameworks/ExtJS/ext-5.0.1/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
             Ext.create('Ext.Component', {
                    title: 'Ipad-iframe scrolling test for EXT js',
                    width: 800,
                    height: 800,
                    padding: 20,
                     autoEl: {
                        tag: "iframe",
                        src: "https://www.testReport.com"
                 },
                    renderTo: Ext.getBody()
                });
         });
      </script>
   </head>

</html>

但是，当添加更多面板并尝试在其中一个面板中显示iframe时，滚动将不起作用。

这是带有三个面板的示例代码，其中无法进行滚动。

 <!DOCTYPE html>
<html>
   <head>
      <link href = "js/frameworks/ExtJS/ext-5.0.1/resources/ext-theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "js/frameworks/ExtJS/ext-5.0.1/ext-all.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.16/iframeResizer.min.js"></script>


      <script type = "text/javascript">
         Ext.onReady(function() {
          var dispalyPanel=   Ext.create('Ext.Component', {
                    title: 'Ipad-iframe scrolling test for EXT js',
                    width: 600,
                    height: 600,
                    padding: 20,
                    id : "myIFrame",
                     autoEl: {
                        tag: "iframe",
                        src: "https://www.testreports.com"
                 }
                });


          var childPanel1 = Ext.create('Ext.Panel', {
              height : 100,
              html: 'First Panel'
           });
           var childPanel2 = Ext.create('Ext.Panel', {
               width: 100,
               height: 50,
               html: 'Second Panel'

           });

           var panel = Ext.create('Ext.Panel', {

               layout : {
                   type :'hbox',
                   align: 'stretch'               
                },
                items : [childPanel2, dispalyPanel]
           });          
           Ext.create('Ext.panel.Panel', {
              renderTo: Ext.getBody(),
              autoScroll:true,
              width: 800,
              height : 800,
              border : true,

              items: [ childPanel1, panel ]
           });
         });   
      </script>
   </head> 
</html>

任何帮助都会有所帮助:)，谢谢。

EXT JS 5.0.0 ipad滚动不起作用

0 个答案: