Hybrid View

  1. #1
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    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,962
    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
    466
    Vote Rating
    1
    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,962
    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
    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.

  8. #8
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
    pigopl is on a distinguished road

      0  

    Question ? Possible to write new HTML including external scripts to existing iFrame?

    ? Possible to write new HTML including external scripts to existing iFrame?


    It is possible to write an entirely new HTML document with embedded stylesheets and external script references to an existing iFrame?

    I am loading an existing page into one managed iFrame and want to extract the navigation element out of this page and write it to another managed iFrame. (part of transition of an existing non-ext web app)

    The navigation div extracted requires a number of external stylesheets and javascript files to work properly.

    I have been extracting the navigation div from the first iFrame and embedding this in a page structure thus:
    Code:
    var mnu = '<html><head>\
    <script type="text/javascript" src="/moin_static160/ea/js/switchcontent.js" ></script>\
    <script type="text/javascript" src="/moin_static160/ea/js/switchicon.js"></script>\
    <script type="text/javascript" src="/moin_static160/ea/js/dhtmlXCommon.js"></script>\
    <script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree.js"></script>\
    <script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree_kn.js"></script>\
    <script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree_xw.js"></script>\
    <script type="text/javascript" src="/moin_static160/ea/js/eatree.js"></script>\
    <script type="text/javascript" src="/moin_static160/ea/js/cookie.js"></script>\
    </head><body>'
     + Ext.getCmp('app-tab1').getFrameDocument().getElementById('sidebar').innerHTML +
    '</body></html>';
    and writing it to the new managed iframe thus:
    Code:
    Ext.getCmp('nav-panel').getFrame().update( mnu, true, null );
    However, the body gets written, but the head containing all the javascripts and stylesheet references does not.

    Is this possible like this or can I achieve this in some other way?

    Thanks for your help,

    Tim

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

      0  

    Default


    Quote Originally Posted by pigopl View Post
    It is possible to write an entirely new HTML document with embedded stylesheets and external script references to an existing iFrame?
    However, the body gets written, but the head containing all the javascripts and stylesheet references does not.

    Is this possible like this or can I achieve this in some other way?

    Thanks for your help,

    Tim
    @Tim - Due to security restrictions (as mentioned earlier on Post #41) it would be possible but you would need to set a local src Url to the frame first, then you could inject script references into the document once the shell page is loaded. MIF has a series of helper functions to accomplish that:

    Code:
    MIF.on('domready', function(frame){
        frame.writeScript('',{src:"/moin_static160/ea/js/switchcontent.js"});
    });
    But, if this approach were to be used frequently, I'd recommend you study the adviframes.html demo closely, as it demonstrates how to cache (using ext-basex:ux.ModuleManager) those js libraries and stylesheets and inject them at will into any iframe when needed with only a single trip to the server.
    "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
    Dec 2007
    Posts
    7
    Vote Rating
    0
    pigopl is on a distinguished road

      0  

    Default


    Quote Originally Posted by hendricd View Post
    @Tim - Due to security restrictions (as mentioned earlier on Post #41) it would be possible but you would need to set a local src Url to the frame first, then you could inject script references into the document once the shell page is loaded. MIF has a series of helper functions to accomplish that:

    Code:
    MIF.on('domready', function(frame){
        frame.writeScript('',{src:"/moin_static160/ea/js/switchcontent.js"});
    });
    But, if this approach were to be used frequently, I'd recommend you study the adviframes.html demo closely, as it demonstrates how to cache (using ext-basex:ux.ModuleManager) those js libraries and stylesheets and inject them at will into any iframe when needed with only a single trip to the server.
    Doug,

    I shall study the example as you suggest however, as I shall be loading plenty of frames with the same libraries and this looks like it would speed up the app considerably.

    Many thanks for also showing me the simple way to get it done - this helps me with getting a proof of concept out of the door.

    Regards,
    Tim

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