1. #1
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

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

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


    ux.ManagedIFrame/Panel (Current Release 1.2.7, for Ext 2.2.x or under only)

    A version for Ext 3.0 can be found here.

    The latest build is also available on code.google.

    Some features available:
    • UpdateManager.update and load support (to IFrames document).
    • advanced scripting support.
    • loadMask support.
    • Cross-frame messaging
    Supported events:
    • documentloaded
    • domready (fired when used with Updatemanager.update method, or when the document DOM reports ready)
    • message[: subject]
    • exception
    • blur (fired when the frame window loses focus)
    • focus (fired when the frame window receives focus)
    • unload (fired when the frame document is unloaded)
    ux.ManagedIframePanel (Current Release 1.2, extends Ext.Panel) leverages the cool layout management features of a Panel, but embeds a ManagedIframe into the body of the panel. This preserves the native header, footer, and toolbar support of a standard panel, but permits creation of complex body layouts surrounding an IFrame.

    Licensing: MIF/MIFP v1.2 or higher is dual-licensed: LGPL 3.0 or CDL for commercial use.

    Related Links:Usage Example:

    PHP Code:
    var newFrame yourTabPanel.add({
        
    xtype       'iframepanel',
        
    id            'mifp_1',
        
    title         'Loading...',
        
    loadMask  true,
        
    frameConfig: {{autoCreate:{id'frame1'}},  //optional, give the frame your own id and name
        
    defaultSrc 'assets/someURL.html',
        
    listeners: {
           
    domready : function(frame){ //only raised for "same-origin" documents
                //Set the tab Title to the Document Title
                 
    var docframe.getDocument();
                 if(
    doc){ frame.ownerCt.setTitle(doc.title); }
     
                
    //Add some custom CSS Rules to the frame document
                
    var rule 'p.fancyP {padding:5px 10px 5px 10px;border:1px solid;' +
                                   
    'font:normal 11px tahoma,arial,helvetica,sans-serif;}';
                
    frame.CSS.createStyleSheetrule'fancyP' );
     
                
    //Find all the 'p' tags in the frame docuement, and add the fancyP className to them
                
    frame.select('p').addClass('fancyP');              
           }
        }
    });
    yourTabPanel.doLayout();  //if TabPanel is already rendered
    yourTabPanel.setActiveTab(newFrame); 
    More Examples:
    Extract the current source and demo files from miframe1_2.zip directly into a new/existing: /examples/miframe directory of your standard 2.x Ext.distribution (except for the desktop.zip demo -- that should go in /examples/desktop).

    Updated: Version 1.1 This new baseline (1.1) adds:
    • frame Ext.Element support (ie. MIF.get, getDom, getDoc, fly ),
    • frame CSS selector queries (eg. MIF.select/query) ,
    • frame CSS.styleSheet interface (create, modify, remove frame-embedded style rules)
    • frame Ext.EventManager support to DOM elements embedded in a frames document. (Use the MIF interface to query embedded DOM elements just like you would in the parent document; all without loading the Ext framework within the embedded page):
    PHP Code:
    MIF.select('img',true).setOpacity(.5);  or
    MIFPanel.getFrame().select('img',true).setOpacity(.5); 
    Set EventListeners on a frames DOM elements for handling with scripts hosted in the parent page:
    PHP Code:
    MIF.getDoc().on('click',function(e){ alert'Image ' e.getTarget().id ' was Clicked.') },null, {delegate:'img'}); 
    Updated (8/22/08): Version 1.2 released. Adds FF3 compatibility fixes, and improved loadMask support.

    Updated
    (4/26/09): Version 1.2.4 released. Adds [s]Ext 3.0 compatibility[s/] no longer, and adds 'resize' event support.
    Updated (5/16/09): V 1.2.5 fixes X-Frame Messaging bug.
    Updated (6/30/09): V 1.2.6 fixes domready bug, adds submitAsTarget method.
    Updated (11/10/09): V 1.2.7 fixes another domready bug.

    Thanks to all for the valuable feedback.
    Note: the current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.
    Attached Files
    Last edited by hendricd; 25 Nov 2009 at 5:50 AM. Reason: 1.2.7 Release
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  2. #2

  3. #3
    Ext User
    Join Date
    Apr 2007
    Location
    Melbourne, Australia
    Posts
    169
    Vote Rating
    0
    Zakaroonikov is on a distinguished road

      0  

    Default


    If I were to point this to say a PDF file or Word document would any event fire after the file had been launched?

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @Zakaroonikov -- If you are speaking of "same-origin" documents, you can get the MIF's 'domready' event working for you as it would fire immediately after the frames' new page markup as been DOMized.

    Also, there is the 'documentloaded' event which is raised when all the 'assets' are finally loaded.

    Short of that, you'd need a browser.plugin event to guarantee full 'load' status.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    468
    Vote Rating
    2
    fangzhouxing is on a distinguished road

      0  

    Default


    Can anyone give some scenario that must use ManagedIframePanel instead of other component?

  6. #6
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @fangzhouxing -- other component?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Ext User nkohari's Avatar
    Join Date
    Sep 2007
    Posts
    10
    Vote Rating
    1
    nkohari is on a distinguished road

      0  

    Default


    This is fantastic! Thanks hendricd. You might also want to note that in 1.1 you have to hook listeners to the ManagedIframePanel itself, rather than putting them in the frameConfig as you did with 1.0x. Unless, that is, I was just doing something "unsupported" that happened to work.

    Keep up the great work on this extension, it's been a lifesaver for me.

  8. #8
    Ext User
    Join Date
    Oct 2007
    Posts
    42
    Vote Rating
    0
    mykes is on a distinguished road

      0  

    Default


    Quote Originally Posted by fangzhouxing View Post
    Can anyone give some scenario that must use ManagedIframePanel instead of other component?
    Any place you would display user generated content. If the user can somehow create bad HTML (no close tags for tables or divs or whatever), it can screw up the page display in "other" components.

  9. #9
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @nkohari -- No, that is by design. The MIF events are actually "relayed" to the MIFPanel listeners if you define them on the Panel.

    The frameConfig allows the same listeners to be passed to MIF class too (via the Panel), your choice.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  10. #10
    Ext User
    Join Date
    Oct 2007
    Posts
    42
    Vote Rating
    0
    mykes is on a distinguished road

      0  

    Default


    OK, maybe this is a little over the top, but...

    Code:
    window.onload = function() {
        var base = top.location.href;
        base = base.replace(/\?.*$/, "");
        base = base.replace(/\#.*$/, "");
        var base_len = base.length;
        var anchorTags = document.getElementsByTagName('a');
        for (var i = 0; i < anchorTags.length; i++)
        {
            var url = anchorTags[i].href;
            if (url.substr(0, base_len) != base) {
                anchorTags[i].onclick = function() {
                    var i = 0;
                    window.open(url);
                    return false;
                }
            }
            else {
                anchorTags[i].onclick = function() {
                    location.href = url;
                    return false; 
                }
            }
        }
    }
    If you run the above code in the iframe, on document load, it fixes all the non-local-domain links so they open in a new window. I give you this code because it doesn't require you to load Ext into the iframe...

    Now if you display some user generated HTML content in the iframe that has a link in it, when the user clicks on the link, it doesn't wipe out the entire desktop to load the new page in the browser.

    You could run that code for people if some config variable is passed to iframe constructor.

    Feel free to modify it to suit your purposes

Thread Participants: 184

  1. franklt69 (7 Posts)
  2. galdaka (1 Post)
  3. jarrod (1 Post)
  4. jay@moduscreate.com (3 Posts)
  5. willgillen (1 Post)
  6. DaNCeT (1 Post)
  7. stever (1 Post)
  8. Dumbledore (1 Post)
  9. JeffBurr (1 Post)
  10. timb (2 Posts)
  11. dolittle (3 Posts)
  12. mystix (4 Posts)
  13. fangzhouxing (2 Posts)
  14. cobnet (3 Posts)
  15. mysticav (7 Posts)
  16. chiphi13 (1 Post)
  17. sdrew (2 Posts)
  18. Zakaroonikov (1 Post)
  19. DigitalSkyline (1 Post)
  20. Darklight (8 Posts)
  21. mirage (2 Posts)
  22. sj137 (2 Posts)
  23. NBRed5 (2 Posts)
  24. ethraza (1 Post)
  25. Ytorres (1 Post)
  26. javaopensource (2 Posts)
  27. naxito (7 Posts)
  28. pbaccari (2 Posts)
  29. Ronaldo (2 Posts)
  30. myrddin (2 Posts)
  31. provagino (3 Posts)
  32. mjlecomte (1 Post)
  33. ZooKeeper (7 Posts)
  34. liusyan (1 Post)
  35. border9 (1 Post)
  36. bbz (2 Posts)
  37. adkent (2 Posts)
  38. gelleneu (2 Posts)
  39. robin30 (6 Posts)
  40. ollyando (4 Posts)
  41. evilized (2 Posts)
  42. nkohari (1 Post)
  43. rballman (2 Posts)
  44. cmarin (5 Posts)
  45. mykes (2 Posts)
  46. bhomass (13 Posts)
  47. robiechahine (1 Post)
  48. wm003 (1 Post)
  49. egs (3 Posts)
  50. simonbun (1 Post)
  51. stumpy_uk (12 Posts)
  52. linker_lin (9 Posts)
  53. tpinne (3 Posts)
  54. Mthor (5 Posts)
  55. bkraut (2 Posts)
  56. disizben (2 Posts)
  57. GreigM (4 Posts)
  58. thoreking (1 Post)
  59. mikester (2 Posts)
  60. markpele (1 Post)
  61. donssmith (6 Posts)
  62. mankz (6 Posts)
  63. sjerry (1 Post)
  64. sanjshah (20 Posts)
  65. pigopl (2 Posts)
  66. nanich (2 Posts)
  67. marco76 (17 Posts)
  68. armit (2 Posts)
  69. colinexl (6 Posts)
  70. Romantik (6 Posts)
  71. wekkaw (2 Posts)
  72. paubach (11 Posts)
  73. zumpi (2 Posts)
  74. jbird526 (7 Posts)
  75. elishnevsky (2 Posts)
  76. markkl (2 Posts)
  77. svdb (8 Posts)
  78. basshcm (2 Posts)
  79. Boon (1 Post)
  80. csextjs (2 Posts)
  81. Richie1985 (5 Posts)
  82. iulian (1 Post)
  83. varsos (9 Posts)
  84. WixSL (7 Posts)
  85. Rafael (6 Posts)
  86. mbogdanovich (4 Posts)
  87. JErickson (3 Posts)
  88. cirvine (2 Posts)
  89. damian79 (1 Post)
  90. jimkan (4 Posts)
  91. specialagent24 (5 Posts)
  92. smartesttom (3 Posts)
  93. dias (2 Posts)
  94. zombeerose (4 Posts)
  95. eway (3 Posts)
  96. GOTTMODUS (1 Post)
  97. alexpgh (1 Post)
  98. keckeroo (1 Post)
  99. hp (1 Post)
  100. gpstatnon (5 Posts)
  101. jdecarvalho (1 Post)
  102. calverte (1 Post)
  103. SyRenity (3 Posts)
  104. zerba78 (14 Posts)
  105. vvietsch (1 Post)
  106. shuang (1 Post)
  107. Michou (2 Posts)
  108. shay2501 (4 Posts)
  109. pokerking400 (2 Posts)
  110. gbradley (2 Posts)
  111. cesarwbr (6 Posts)
  112. Ronhead (3 Posts)
  113. MichaelOstrovsky (4 Posts)
  114. tfulmino (1 Post)
  115. superFly77 (9 Posts)
  116. Jinping (2 Posts)
  117. evelynloo (4 Posts)
  118. excelsis (3 Posts)
  119. shirkavand (3 Posts)
  120. LovingIt (1 Post)
  121. emredagli (3 Posts)
  122. joedimagio (3 Posts)
  123. lucky_luk3 (2 Posts)
  124. peter seliger (2 Posts)
  125. cazzadori (2 Posts)
  126. wkwathen (3 Posts)
  127. afei (5 Posts)
  128. dubrovsky (5 Posts)
  129. muratyildiz (2 Posts)
  130. service@think-1st.de (8 Posts)
  131. vayumahesh (1 Post)
  132. salilak (1 Post)
  133. v.zen (8 Posts)
  134. Stephan Schrade (8 Posts)
  135. prp (1 Post)
  136. kunduvalappil (2 Posts)
  137. Bucs (13 Posts)
  138. butters1976 (7 Posts)
  139. alexw23 (1 Post)
  140. Drayton (8 Posts)
  141. abnervv (2 Posts)
  142. Hanna Lu (1 Post)
  143. telly (1 Post)
  144. carnifun (2 Posts)
  145. icryrainix (3 Posts)
  146. mschwartz (5 Posts)
  147. ke.xu (2 Posts)
  148. extjs_new (1 Post)
  149. piroman (15 Posts)
  150. cdeguzman (1 Post)
  151. kaglim (2 Posts)
  152. Alex84 (1 Post)
  153. rakhib (1 Post)
  154. ady@daxtechnologies.com (7 Posts)
  155. Grolubao (1 Post)
  156. johnfron (1 Post)
  157. westy (1 Post)
  158. chrizmaster (1 Post)
  159. col (2 Posts)
  160. jackjia (1 Post)
  161. gamunculus (1 Post)
  162. cdeclercq (3 Posts)
  163. muxcmux (1 Post)
  164. ahisis (3 Posts)
  165. easycodes (3 Posts)
  166. kanntronics (1 Post)
  167. Maxrunner (10 Posts)
  168. stitcherooni (3 Posts)
  169. Rushleader (2 Posts)
  170. Tinki (2 Posts)
  171. gamekingx (1 Post)
  172. nandubochkar (2 Posts)
  173. Hilbert (2 Posts)
  174. pabloflores (3 Posts)
  175. ashaihullin (2 Posts)
  176. the_traveller (1 Post)
  177. jasmina (4 Posts)
  178. luisloboborobia (1 Post)
  179. Macortel (3 Posts)
  180. liuqiwuhao@163.com (1 Post)
  181. scaddenp (3 Posts)
  182. hjfiou (1 Post)
  183. tstone84 (1 Post)
  184. jbarry (1 Post)

Tags for this Thread