[2.0 only] ux.ManagedIframe/Panel (1.2.7)

[sanjshah]

Aplogies, but I'm not sure what I'm doing wrong, here is my main page:

    Ext.BLANK_IMAGE_URL = '../ext-2.0/resources/images/default/s.gif';

    Ext.onReady(function(){
        Ext.QuickTips.init();
        Ext.QuickTips.getQuickTip().interceptTitles = true;
        Ext.QuickTips.enable();

        // create some portlet tools using built in Ext tool ids
       var tools = [{
                   qtip:'Reset',
               id:'gear',
               handler: function(e, target, panel){
                   panel.setSrc();
               }
           },{
               id:'close',
               qtip:'Close',
               handler: function(e, target, panel){
                   panel.ownerCt.remove(panel, true);
               }
        }];


       var viewport = new Ext.Viewport({
              layout:'border',
              items:[{
                  region:'west',
                  id:'west-panel',
                  title:'O&M Sites',
                  split:true,
                  width: 200,
                  minSize: 175,
                  maxSize: 400,
                  collapsible: false,
                  animCollapse  :Ext.isIE,
                  //margins       :'35 0 5 5',
                  //cmargins      :'35 5 5 5',
                  margins       :'5 5 5 5',
                  cmargins      :'5 5 5 5',
                  layout        :'accordion',
                  defaultType   :'iframepanel',
                  layoutConfig  :{
                  animate:  Ext.isIE
                  },
                  defaults      :{
                        loadMask:false,
                        border:false
                   },
                  items : [{
                      html: Ext.example.shortBogusMarkup,
                      title:'Navigation'
                     },{
                      title:'Settings',
                      //html: Ext.example.shortBogusMarkup
                      defaultSrc :  'links.html'                  
                      }]
              },
              {
                  xtype     :'portal',
                  hideMode  :!Ext.isIE?'nosize':'display',
                  region    :'center',
                  id:'centerFrame',
                  frameConfig: { name : 'mycenterFrame' },
                  margins   :'5 5 5 5',
                  defaults:{
                        hideMode:!Ext.isIE?'nosize':'display'
                  },
                  title:'Manuals Portal',
                  items:[{
                      columnWidth:1,
                      style:{padding:'10px 10px 10px 10px'},
                      defaultType:'iframeportlet',
                      defaults:{
                          height:800
                         ,loadMask:false
                         ,tools: tools
                        },
                      items:[{
                           title:'Default Site'
                          ,defaultSrc :  'login.asp'
                      }]
                  }]
              }]
        });
       var toggle = false;
       var comeHome = function(){ Ext.getCmp('sites').activeTab.setSrc();},
           printPanel = function(){
               try{
                  Ext.getCmp('sites').activeTab.iframe.print();
              }catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}
           },
           _urlDelim = '\/',
           getLocationAbsolute = function(){
               var d= _urlDelim = location.href.indexOf('\/') != -1 ? '\/':'\\';
               var u=location.href.split(d);
               u.pop(); //this page
               return u.join(d);
           },
           getSiteRoot = function(){
            var url = getLocationAbsolute().split(_urlDelim );
            url.pop();
                    return url.join(_urlDelim);
           };


       win = new Ext.Window({
            title: 'WebBrowser Fun',
            id:'browserfun',
            layout:'fit',
            minimizable: false,
            maximizable: true,
            width:600,
            height: 500,
            plain: false,
            items:{
              xtype:'tabpanel',
              id:'sites',
              defaultType: 'iframepanel',
              defaults:{
                closable:true,
                loadMask:{msg:'Loading Site...'},
                autoShow:true,

                tbar : [{ text:'Return',handler: comeHome},
                        '-',
                        {text: 'Print',handler: printPanel},
                        '-',
                        {
                        split:true,
                        text:'Drop Down Menu',
                        iconCls: 'preview-bottom',
                        handler: null,
                        menu:{
                            id:'reading-menu',
                            cls:'reading-menu',
                            width:200,
                            listeners:{        //mask all frames while menu is visible.
                                beforeshow : Ext.ux.ManagedIFrame.Manager.showDragMask,
                                hide       : Ext.ux.ManagedIFrame.Manager.hideDragMask,
                                scope      : Ext.ux.ManagedIFrame.Manager

                            },
                            items: [{
                                text:'Bottom',
                                checked:true,
                                group:'rpgroup',
                                scope:this,
                                iconCls:'preview-bottom'
                            },{
                                text:'Right',
                                checked:false,
                                group:'rpgroup',
                                scope:this,
                                iconCls:'preview-right'
                            },{
                                text:'Hidden',
                                checked:false,
                                group:'rpgroup',
                                scope:this,
                                iconCls:'preview-hide'
                            }]
                        }
                    }
                  ],
                listeners:{
                       activate:function(panel){
                           ///panel.getFrame().removeShim();
                        }
                }
              },      //   prevent frames from bleeding thru overLayed tabs
              listeners:{
                      beforetabchange:function(tabPanel,newTab,prevTab){
                          //if(prevTab)prevTab.getFrame().applyShim();
                        }
                     },
              items: [{
                     id: 'google'
                    ,title:'Google'
                    ,defaultSrc : function(){return 'http://www.google.com';}
                       }, {
                     id: 'ajaxian'
                    ,title:'Ajaxian'
                    ,defaultSrc :  'http://www.ajaxian.com'

                       }, {
                     id: 'extjs'
                    ,title:'Ext Forums'
                    ,defaultSrc :  'http://extjs.com/forum/showthread.php?t=16590'
                       },{
                     id: 'bogus'
                    ,title:'Bogus Markup'
                    ,loadMask:{msg:'Loading Printable Bogus Markup...'}
                    //,frameStyle : {overflow:'scroll'}
                    //,frameConfig:{scrolling: 'yes', style:{overflow:'scroll'}}
                    ,html: '<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup

                     ,tbar:[{
                        text: 'Print',
                        handler: printPanel
                     },'-',{
                        text: 'Switch', //<-- Added this .reset sample
                        handler: function(){
                          var i;
                          if(i=Ext.getCmp('sites').activeTab){
                              toggle = !toggle;
                              if (toggle){
                                i.setSrc('http://www.google.com', true);
                              }else{
                                i.getFrame().reset(null, function(){
                                    i.getFrame().update('<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup);

                                });

                              }
                            }
                         }
                      }]
                 }
              ]
            }
         });
         win.show(Ext.getBody());

         Ext.EventManager.on(window, "beforeunload", function(){

           Ext.destroy(viewport, win);

         },window,{single:true});


}); 

here is the links page which is loaded in the west region:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="exttools/ext-2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="exttools/ext-2.0/ext-all-debug.js"></script>
     <script type="text/javascript" src="exttools/iframe/Portal.js"></script>
     <script type="text/javascript" src="exttools/iframe/PortalColumn.js"></script>
     <script type="text/javascript" src="exttools/iframe/Portlet.js"></script>
    <script type="text/javascript" src="exttools/iframe/miframe.js"></script>
<script type="text/javascript">
<!--
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>
</head>
<script type="text/javascript">
function changepage()
{
Ext.getCmp('mycenterFrame').setSrc('http://www.google.com');
}
</script> 

<body>
<a href="#" onclick="MM_callJS('changepage()')">Change mycenterframe</a><br />
</body>
</html> 

Not sure whats wrong here?

[hendricd]

@sanjshah -- Any particular reason why your loading an iframe into the west regions (with All of Ext in it) just to render a menu?

By doing that, your onclick handlers are out of scope with the main page. It'll never find the center-region frame running in its own frame.

[sanjshah]

No reason other than I would like to show a different menu in that region depending on page is loaded in the centre region, although I might be able to get around that if I a bbar to the loaded in the center page, could you please provide a very simple example a menu in the west region so that I can work on it PLEASE (I apologise but I learning as I working on a project!)

Thanks!

@sanjshah -- Any particular reason why your loading an iframe into the west regions (with All of Ext in it) just to render a menu?

By doing that, your onclick handlers are out of scope with the main page. It'll never find the center-region frame running in its own frame.

[hendricd]

OK, let's keep this simple then:

var viewport = new Ext.Viewport({ 
              layout:'border', 
              items:[{ 
                  region:'west', 
                  id:'west-panel', 
                  title:'O&M Sites', 
                  split:true, 
                  width: 200, 
                  minSize: 175, 
                  maxSize: 400, 
                  collapsible: false, 
                  margins       :'5 5 5 5', 
                  cmargins      :'5 5 5 5', 
                  layout        :'accordion', 
                 defaultType   :'iframepanel', 
                  layoutConfig  :{ 
                     animate:  Ext.isIE 
                  }, 
                  defaults      :{ 
                        loadMask:false, 
                        border:false 
                   }, 
                  items : [{ 
                      html:'<a href="http://www.yahoo.com" target="mycenterFrame">Change mycenterframe</a><br />', 
                      title:'Navigation' 
                     }] 
              },
             { 
                  xtype     :'portal', 
                  hideMode  :!Ext.isIE?'nosize':'display', 
                  region    :'center', 
                  id:'centerFrame', 
            frameConfig: { name : 'mycenterFrame' }, margins   :'5 5 5 5', 
                  title:'Manuals Portal', 
                  items:[{ 
                      columnWidth:1, 
                      style:{padding:'10px 10px 10px 10px'}, 
                      defaultType:'iframeportlet', 
                      defaults:{ 
                          height:800 
                         ,loadMask:false 
                         ,tools: tools 
                        }, 
                      items:[{ 
                          title:'Default Site' ,
                           frameConfig: { name : 'mycenterFrame' },
                         defaultSrc :  'login.asp' 
                      }] 
                  }] 
              }] 
        }); 

[sanjshah]

Thanks hendricd,

That's great! I can play around with code provided.

Regards,

Sanj

[cmarin]

Doug,
Thank you so much, you're suggestion worked! The only issue I'm facing now is that the local page that is loaded in the iFrame is cut off at the bottom and no scroll bars are appearing. I notice that if I change the iFrame to point to Amazon's homepage though, the scroll bars appear automatically. Do you happen to have any suggestions to fix this?

The defaultSrc property is a Component config startup url, and it not considered again after the Panel is rendered.

To change the current url, use the setSrc method after rendering, when you're ready:

Ext.getCmp('viz').setSrc('http://www.google.com');

[hendricd]

@cmarin -- The default styling for the rendered frame is overflow:auto, thus scollbars will not appear unless necessary. Is your start page a "short" one?

[cmarin]

Doug, thank you again. Yes, the page that houses the iFrame takes up the height and width of the screen so in many cases it will be shorter than the one it will house in the iFrame. Is there any way around this?

@cmarin -- The default styling for the rendered frame is overflow:auto, thus scollbars will not appear unless necessary. Is your start page a "short" one?

[hendricd]

Are you looking for scrollbars ON all the time?

[cmarin]

For the iFrame itself autoscroll would be ideal but if that is not possible scrollbars at all times would be an improvement over not being able to see the bottom of the page. Thanks again.

Are you looking for scrollbars ON all the time?