From Learn About the Ext JavaScript Library

Using the ManagedIFrame object

The ManagedIFrame component extends/overrides an existing (or creates a new) IFRAME's Ext.Element with additional scripting and event handling features unique to such elements.

To enhance the behaviors of an existing IFRAME, the element ID of the IFRAME is specified in the first parameter, followed by any additional configuration options.

Example:

var MIF = new Ext.ux.ManagedIFrame('frame1',{src:'http://www.extjs.com', loadMask:true });

To create a new IFRAME, simply pass the config object as the first parameter in the constructor, and specify an autoCreate (Ext.DomHelper)config within it to specify its structure:

var MIF = new Ext.ux.ManagedIFrame({ autoCreate:{src:'http://www.extjs.com',height:350,width:'100%'}
                     ,loadMask :false 
                   });

Defined ManagedIFrame CSS Classnames

Each IFRAME managed by the component is assigned a CSS classname of 'x-managed-iframe'. The style rules may modified further at runtime by using the Ext.util.CSS.updateRule method:

 Ext.util.CSS.updateRule('x-managed-iframe','overflow', 'hidden');

or, an individual frames' style can be modified with the Components builtin Element.setStyle method:

MIF.setStyle('overflow','auto');

The created masking element also has a classname definition of 'x-managed-iframe-mask' and can be adjusted the same way.

Supported ManagedIFrame Events

ManagedIFrame generates the following events during normal operation of the frame:

• domready - signature:(frame) raised when the embedded document's DOM has reported ready.
• documentloaded - signature:(frame) raised when all embedded document resources have been fully loaded.
• focus [1.1+] - signature:(frame) raised when the embedded frame window receives focus.
• blur [1.1+] - signature:(frame) raised when the embedded frame window loses focus.
• unload [1.1+] - signature:(frame) raised when the embedded frame document is unloaded.
• exception - signature:(frame, exception) raised during document access permission violations and script execution errors.
• message - signature:(frame, messageObj)
  • signature: messageObj:
    • data (mixed) the message payload of any type
    • type (string) 'message'
    • domain (string) the senders window/frame document domain
    • uri (string) the senders URI
    • source (object) the senders Window object
    • tag (mixed, optional for sender) reference tag, for additional domain coordination.

Event subscribers should use the standard Ext.EventManager interface for defining listeners.

MIF.on('domready', fnChangeStatus );

var MIF = new Ext.ux.ManagedIFrame({ autoCreate:{src:'http://www.extjs.com'}
                     ,loadMask :false 
                     ,listeners:{
                           domready:   fnChangeStatus 
                       }
                   });

ManagedIFrame Constructor Configuration Options

ManagedIFrame:config:loadMask

type: true, false, or an extended Ext.LoadMask config object:

• msg  : (string, optional) text or markup Msg display centered in the frame mask.
• msgCls  : CSS classname assigned to the message text.
• disabled  : false(default)
• hideOnReady : true(default) autoHides the mask when the frames document has reached a domready state, false - to remove the loadMask when the document has been fully loaded.
• maskEl  : block Element id (or reference) to the element used during the masking operation. As IFRAMEs typically are not maskable by Ext.Element.mask, MIF will DIV-wrap the IFRAME automatically to provide a suitable masking element for use with Element.mask, if maskEl is not specified.

ManagedIFrame:config:src

type: (string or function) A string (or function that returns a string) resource URL to be loaded by the Component after rendering/initialization. If specified, this value is applied to the IFRAME's src attribute directly.

ManagedIFrame:config:showLoadIndicator

type: (boolean) false(default) to disable UpdateManagers default loading indicator. Caution: setting a true value here can cause unwanted events to be raised when using the :update method to write new contents directly into the frames' document.

ManagedIFrame:config:html

type: (string, object) A Ext.DomHelper Config object or raw markup/text string containing the new content to be written to the frames' document when rendered. Note: This value is ignored if the :src config attribute is specifed.

ManagedIFrame:config:disableMessaging

type: (boolean) true(default) By default, MIFs frame messaging interface is disabled. Set to false to render the necessary interfaces to support messaging between the host page, the frame, and other hosted embedded frames.

ManagedIFrame:config:eventsFollowFrameLinks

type: (boolean) true(default) By default, MIF will raise the 'domready' and 'documentloaded' events when a user changes the embedded documents' location (back button, submit, refesh, or other method). Set to false to only raise these events based upon a programmatic change to the document location (via the component methods :setSrc or :update).