Ext JS - Learning Center

Extension:ManagedIframe

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Iframe Panels
Author: Doug Hendricks
Published: 10/29/2007
Version: 1.1
Ext Version: 1.1+(MIF only), 2.0.x
License: LGPLv3
Demo Link: No Demo
Forum Post: View Post

Contents

Introduction

  • Ever try to use an Iframe element as a writable body to Ext.Panel? Perhaps to render your own content in isolation from the rest of the host page, or just load another website in a tab panel.
  • Getting an IFRAME into the right place in the DOM isn't too difficult, but updating its contents with Ext.Elements' update method is a challenge. Ext.Element assumes the element it's managing has a innerHTML property. Well, IFRAMEs don't! So to make writable IFRAMEs easier to use within Ext framework, this extension overrides the default update method of Ext.Element(for the designated IFRAME) to provide exactly that sort of thing. Now, you can use: 
IFrameEl.update("<div>New content</div>")

meaning -- you can write any string content (replacing the entire document) directly to embedded document model of an IFrame. When using the extensions' new update and existing load methods, your IFrame acts like any other updateable (like innerHTML) element.

Download

See attachments on this forum post.

Component Reference


IFRAME and XHTML Doctypes

XHTML 1.0 Strict: IFRAME is not part of XHTML 1.0 Strict DTD specification, so on pages that require validation with IFRAME in the document markup, use the XHTML 1.0 Transitional doctype instead: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(Advice: Refrain from reducing core functionality simply to satisfy a validator - it makes absolutely no difference to the browser which XHTML version you choose. In this case, if you need an IFRAME, consider a transitional DTD if you want it to validate. Issues surrounding IFRAMEs in the presence of strict XHMTL can be avoided altogether by allowing the ManagedIFrame instance to manage element creation as necessary.)

For valid pages where you are compelled to use an iframe tag in markup, you can use this XHTML DTD: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Retrieved from "http://extjs.com/learn/Extension:ManagedIframe"
  • This page was last modified 17:15, 15 August 2008.
  • This page has been accessed 32,975 times.