Ext JS - Learning Center

ManageIframe:Examples:examples MIFP

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Example[2.0+]: IFRAME Embedded as the "body" of an Ext.Panel (from markup)

First the example markup for the parent(main) document: 

<body>
    <div id="container">
      <iframe id="containerBody" class="x-panel-body" style="frameBorder:0;width:100%;height:100%;"></iframe>  
    </div>
  </body>

It's important that we assign the IFRAME the appropriate class ("x-panel-body") name matching the Panels' base class (baseCls) used to constuct the remainder of the panel's child elements. 

   Ext.onReady(function(){
       //attach enhanced interface
       new Ext.ux.ManagedIFrame('containerBody',{listeners:{documentloaded:function(){
       		Ext.example.msg('ManagedIFrame Panel', 'Document is Ready.');}
       		}}); 
      
       var panel = new Ext.Panel({
           title: 'My Iframe Panel From Markup'
           ,collapsible     :true
           ,applyTo         : 'container'
           ,width           :400
           ,height          : 400
           ,baseCls         :'x-panel'
           ,autoScroll      :false
           ,frame           :true
           ,animCollapse    :false //cannot animate a collapse/expand on an Iframe !
           ,html            : '<div>Hello World!</div>'  
           
       });
 });

And the javascript above shows:

  • enhance the existing IFRAME (with id of 'containerBody') and assign an event listener, notifying us when the IFRAME's DOM is ready (after it has been written to)
  • then the panels' constructor signifies we wish the panel to be contained by div-element 'container'
  • then, when rendered, the panel will constuct all the containers remaining child elements (header,footer,toolbars, body, bwrap, etc) from existing children (of div 'container') with the same base classname ('x-panel-[header,body,...]'
  • and finally write the 'html' config content into the body.

Noting the markup above, we have already identified the IFRAME with the classname 'x-panel-body' to be panel's body element. Since it already exists in markup, all the other missing elements in the markup (header, footer, toolbars...) will be created around the existing designated body element.

Example[2.0+]: ManagedIframePanel-based TabPanels represented in a layout config fragment

   ...
   ,items:[{
        xtype:'tabpanel',
        deferredRender:false,
        defaults:{autoScroll: true},
        defaultType:"iframepanel",
        activeTab:0,
        items:[{  title:"Yahoo",
                  id:'yahoo',
                  defaultSrc:'http://www.yahoo.com/'
               },{
                   title:"Google",
                   id:'google', 
                   defaultSrc: 'http://www.google.com/'
               },{
                   title:"Customers",
                   id:'reports'
               }]
          }]
Retrieved from "http://www.extjs.com/learn/ManageIframe:Examples:examples_MIFP"
  • This page was last modified on 16 February 2008, at 05:23.
  • This page has been accessed 8,487 times.