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://extjs.com/learn/ManageIframe:Examples:examples_MIFP"