1. #31
    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


    @rkim--

    Iframe page loading is asynchronous. So, use the listeners : { } to wait for the dataavailable event to fire, THEN interact with the frame document (see the example page included in the zip for other samples)


    Code:
    {
          xtype   : 'miframe',
          src       : 'yournestedExtpage.html',
       
          listeners: {
                    dataavailable : {    //raised when the document DOM is ready (same-origin only)
                        element : 'iframeElement',  // MIFElement reference
                        scope    : 'iframeElement'',
                        fn : function(e, target){
                            var win = this.getWindow();
                            if( win){
                                  if( win.Ext && win.MyApp ) {
                                          win.MyApp.iframefunction();
                                  }
                            }
                        }
                    }
            }
      }
    1) Is above the recommended way of accessing functions in iframe document ?

    Never add (expando) new methods/props on the document object. If you are truly loading ANOTHER Ext page into the frame, setup a namespace to keep your variable and functions:
    //

    yournestedExtpage.html
    Code:
    <script>
     Ext.onReady()
      {
        Ext.ns ( 'MyApp' );
        MyApp.iframefunction = function()
        {
           alert("Test");
        }
      }
    </script>

    2) Is there any performance issue of loading each page in ManagedIframe?

    Yes, IFRAMEs are expensive to operate. Use them to isolate CSS/bad behavior from your parent page. There are good reasons to use them (adWare, media, PDFs, mashups/portals, legacy App migration, etc), but they do take their toll.

    3) Is there any document that I can reference other than looking at code ?

    My signature block below has links the documentation site and FAQ for the previous release. As this is still an Alpha release, there is not yet official docs for this version yet. There are several new feature but the MIF.Element methods are largely the same.

    Study the zip-enclosed mif.js example closely. Much can be garnered from that.

    Good hunting
    "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. #32
    Ext JS Premium Member
    Join Date
    Feb 2010
    Location
    Vancouver, BC
    Posts
    194
    Vote Rating
    0
    rkim is on a distinguished road

      0  

    Default


    Quote Originally Posted by hendricd View Post
    @rkim--

    Iframe page loading is asynchronous. So, use the listeners : { } to wait for the dataavailable event to fire, THEN interact with the frame document (see the example page included in the zip for other samples)


    Code:
    {
          xtype   : 'miframe',
          src       : 'yournestedExtpage.html',
       
          listeners: {
                    dataavailable : {    //raised when the document DOM is ready (same-origin only)
                        element : 'iframeElement',  // MIFElement reference
                        scope    : 'iframeElement'',
                        fn : function(e, target){
                            var win = this.getWindow();
                            if( win){
                                  if( win.Ext && win.MyApp ) {
                                          win.MyApp.iframefunction();
                                  }
                            }
                        }
                    }
            }
      }
    1) Is above the recommended way of accessing functions in iframe document ?

    Never add (expando) new methods/props on the document object. If you are truly loading ANOTHER Ext page into the frame, setup a namespace to keep your variable and functions:
    //

    yournestedExtpage.html
    Code:
    <script>
     Ext.onReady()
      {
        Ext.ns ( 'MyApp' );
        MyApp.iframefunction = function()
        {
           alert("Test");
        }
      }
    </script>

    2) Is there any performance issue of loading each page in ManagedIframe?

    Yes, IFRAMEs are expensive to operate. Use them to isolate CSS/bad behavior from your parent page. There are good reasons to use them (adWare, media, PDFs, mashups/portals, legacy App migration, etc), but they do take their toll.

    3) Is there any document that I can reference other than looking at code ?

    My signature block below has links the documentation site and FAQ for the previous release. As this is still an Alpha release, there is not yet official docs for this version yet. There are several new feature but the MIF.Element methods are largely the same.

    Study the zip-enclosed mif.js example closely. Much can be garnered from that.

    Good hunting

    Thanks for the info !!

  3. #33
    Sencha User
    Join Date
    Nov 2008
    Location
    france
    Posts
    58
    Vote Rating
    0
    pkli is on a distinguished road

      0  

    Default Alpha 3 ?

    Alpha 3 ?


    Hi Doug.

    No news about alpha 3 ?
    Or maybe an alpha 2b resolving the "hide menu on click in iframe" bug ? :-)

    Phil

  4. #34
    Ext JS Premium Member
    Join Date
    Feb 2010
    Location
    Vancouver, BC
    Posts
    194
    Vote Rating
    0
    rkim is on a distinguished road

      0  

    Default extjs 4.1 beta

    extjs 4.1 beta


    Hi Doug,

    I have just upgraded the ext to 4.1 and seems to have some issue with multidom.js
    I will take a look as well where the problem is.. if you see the problem, can you let me know ??


    http://www.sencha.com/forum/showthre...a2-for-Ext-4.x

  5. #35
    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 rkim View Post
    Hi Doug,

    I have just upgraded the ext to 4.1 and seems to have some issue with multidom.js
    I will take a look as well where the problem is.. if you see the problem, can you let me know ??
    @rkim --

    MIF 4.0/multidom is NOT compatible with 4.1.anything.

    That said, MIF 4.1 is undergoing testing under the 4.1-beta (as the internals have changed considerably in that release). If you are not using Ext.core.Element methods to query/manipulate IFRAME documents you can probably continue to use the 4.0 version of the MIF component only -- until MIF 4.1 is released....
    "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.


  6. #36
    Ext JS Premium Member
    Join Date
    Feb 2010
    Location
    Vancouver, BC
    Posts
    194
    Vote Rating
    0
    rkim is on a distinguished road

      0  

    Default


    Thank for your response.
    Just wondering the roadmap for MIF 4.1 ?

    Quote Originally Posted by hendricd View Post
    @rkim --

    MIF 4.0/multidom is NOT compatible with 4.1.anything.

    That said, MIF 4.1 is undergoing testing under the 4.1-beta (as the internals have changed considerably in that release). If you are not using Ext.core.Element methods to query/manipulate IFRAME documents you can probably continue to use the 4.0 version of the MIF component only -- until MIF 4.1 is released....

  7. #37
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
    mfalnes1 is on a distinguished road

      0  

    Default Resizable panel is having issues when including the multidom.js

    Resizable panel is having issues when including the multidom.js


    Receiving the error "dom.getBoundingClientRect is not a function" (ext-all-debug.js line 8849) when trying to re-size a panel and the javascript file multidom.js is included. The resizing works fine when the multidom.js is NOT included. I am using ext-js 4.0.7. Is this a known issue? Any other ideas?

    Attached is a zip file containing an html file which can be dropped into the ext-js examples folder. The panel is resizable on the south border. With the multidom.js included in the html then the resizing does not work. Remove the multidom.js and the resizing will work.

    Thanks for your help.
    Attached Files

  8. #38
    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


    @mfalnes1 --

    Thanks for the report. I'll run some tests.

    On what browser(s) are you seeing this behavior?
    "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.


  9. #39
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
    mfalnes1 is on a distinguished road

      0  

    Default


    Thanks Doug,

    I was able to replicate the issue in Chrome, Firefox and IE 9. IE9 is giving a different error.

    SCRIPT5007: Unable to get value of the property 'overflow': object is null or undefined
    ext-all-debug.js, line 8829 character 17

    Also my previous example had a problem in IE and I have attached an updated example.

    Thanks for your help.
    Attached Files

  10. #40
    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


    Fix this first:

    Code:
    items : [{
                    xtype : 'panel',
                    border : true,
                    height: 400,
                    layout : 'fit',
                    html: 'Resizable Panel',
                    resizable: {
                        handles: 's',
                        pinned: true,
                        minHeight: 100,
                        maxHeight: 1000
                    },       <-----  Extra what?
                }]
    "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.