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  

    Lightbulb [REFLOW] IFrames, Flash, Movies, Audio

    [REFLOW] IFrames, Flash, Movies, Audio


    You all may have noticed a few threads here on the forums specifically about Firefox and "movies/audio restarting, iframes refreshing, etc" when switching tabs, etc.

    I'd thought I'd share with you why this happens on FireFox (and not other Browsers).

    FF has a long-standing issue with all embedded object tags (IFRAME, OBJECT, EMBED). Anytime their size (often left and top as well) changes (or that of their parent elements), FF reinitializes those objects during reflow, thus the problem.

    Exts' layout engine (Panels) relies on display:none/block on one internal element (bwrap) for seamless reflow of child Containers within a layout.

    That means any child Ext.Panel, Ext.Component, body, or content which contains one of the markup objects mentioned above (like ManagedIframe, mediapanel, SWFObject (careful here Jack with 2.1+), etc) will be re-initialized as soon as an up-stream bwrap elements' style:display is toggled with display:none/block.

    The best you can do currently to work around the problem in Ext layouts is ensure that no upstream parent in a layout uses display:none/block to control visibility. That's the tricky part. You'll have some luck with tabPanels because of their card layout design (can be controlled with visibility:visible/hidden) but not as a deeply-nested child panel.

    My current recommendation, would be to only use OBJECT,EMBED,IFRAMES in top level, stand-alone Panels or flat layouts/pages where style:visibility can be controlled.

    I've put together a test case demonstrating the problem for Bugzilla, but I fear its too late for Mozilla to fix this in time for FF3 (exists in all releases 1-3.b5).

    ux.MediaPanel has some trickery built in to try to control Visibility on your behalf, and the upcoming release of the ux.Media series addresses that further, but:

    This FF bug severely hampers practical cross-browser media applications for all RIA frameworks like (and less than) Extjs.

    Attached Files
    "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
    Ext User
    Join Date
    Jul 2007
    Location
    Washington, DC
    Posts
    190
    Vote Rating
    0
    esoteric is on a distinguished road

      0  

    Default


    I originally discovered this bug last August and starting trying to determine the problem after much discussion with the Firefox development team the problem was somewhat determined and I have been tracking the ticket for this since then. (dozen's of tickets have been opened regarding this, but this is the main bugzilla ticket that they all get merged into).

    https://bugzilla.mozilla.org/show_bug.cgi?id=90268

  3. #3
    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


    One thing I've noticed (while working on the new version of ux.Media) is all browsers do that except IE!

    I have come up with a fix for it for the new ux.Media Components but, anyone hoping to do charting with Flash with frameworks like Ext (without a new visibility approach for object,embeds, iframes) is going to be really annoyed.
    "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.


  4. #4
    Ext User
    Join Date
    Feb 2008
    Posts
    9
    Vote Rating
    0
    supper008 is on a distinguished road

      0  

    Default


    good boy!

  5. #5
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Quote Originally Posted by hendricd View Post
    That means any child Ext.Panel, Ext.Component, body, or content which contains one of the markup objects mentioned above (like ManagedIframe, mediapanel, SWFObject (careful here Jack with 2.1+), etc) will be re-initialized as soon as an up-stream bwrap elements' style:display is toggled with display:none/block.

    Yes, this is why HtmlEditor has problems being in a TabPanel sometimes (usually depending on deferred rendering). On rendering, it starts to go into design mode then its parent is hidden and it errors out (since going into design mode is asynchronous, it starts, then FF re-initializes it).

    At one point in time I suggested going up the ownerCt chain and add listeners to see when it might get unhidden, but the better solution was to set a timer and just keep trying until it didn't fail.

    As for the flash restarting, you can put in an option for your flash panel to go up the ownerCt chain and change the default hiding method.

    Another thing you will notice at some point, is when you have flash in a floating panel over a non-floating flash panel. FusionCharts shows this bug pretty well. Again, not in IE. If a parent is floating I push the flash inside an iframe. I have to look up the ownerCt chain to know if it is floating which is pretty easy.

    I have lots of workarounds for stuff and I forget to post them, I know it can save other people some time, and I'll try and get better at that...

  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    131
    Vote Rating
    0
    rballman is on a distinguished road

      0  

    Default


    any solutions for this problem? I use the tabs and have an iframe for each tab with a flash page inside the iframe.

  7. #7
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Vote Rating
    0
    koko2589 is on a distinguished road

      0  

    Default


    i show you how i put flash in desktop. do it to put on panel/Window
    its work all Browsers
    swf:
    http://www.edulink.co.il/images/Calculator.swf


    Code:
    new Plugin.CalcWindow(),
    Code:
    Ext.ux.FlashPlugin = function() {
        this.init = function(ct) {
            ct.flashTemplate = new Ext.XTemplate(
                '<div>',
                '<object id="flash-{id}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...ersion=6,0,0,0" width="{swfWidth}" height="{swfHeight}">',
                '<param name="movie" value="{swf}" />',
                '<param name="quality" value="high" />',
                '<param name="wmode" value="transparent" />',
                '<param name="flashvars" value="{computedflashvars}" />',
                '<param name="allowScriptAccess" value="domain" />',
                '<param name="align" value="t" />',
                '<param name="salign" value="TL" />',
                '<param name="swliveconnect" value="true" />',
                '<param name="scale" value="noscale" />',
                '<embed name="flash-{id}" src="{swf}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="{computedflashvars}" type="application/x-shockwave-flash" width="{swfWidth}" height="{swfHeight}" wmode="transparent" allowScriptAccess="always" swliveconnect="true" align="t" salign="TL" scale="noscale"></embed>',
                '</object>',
                '</div>'
            );
            ct.flashTemplate.compile();
            ct.renderFlash = function() {
                if (this.flashvars && (typeof this.flashvars == 'object')) {
                    var tempflashvars = Ext.apply({}, this.flashvars);
                    for (var key in tempflashvars) {
                        if (typeof tempflashvars[key] == 'function') {
                            tempflashvars[key] = tempflashvars[key].call(this, true);
                        } 
                    };
                    this.computedflashvars = Ext.urlEncode(tempflashvars);
                }
                this.swfHeight = this.body.getSize().height -2;
                this.swfWidth = this.body.getSize().width -2;
                if (this.body.first()) this.flashTemplate.overwrite(this.body.first(),this);
                else this.flashTemplate.insertFirst(this.body,this);
            };
            ct.loadFlash = function(config) {
                Ext.apply(this,config);
                this.renderFlash();
            };
            ct.on('afterlayout',ct.renderFlash, ct);
        };
    };
     
    //--------------------------------------------------------------------------------------------------------------------------
    /* *******************************************************************************
     * Use Plugin Namespace
     */
     
    var Plugin = Plugin ||
    {};
    Plugin.CalcWindow = Ext.extend(Ext.app.Module, {
     id : 'calc-win',
     
     init : function(){
      this.launcher = {
       text: 'מחשבון ',
       iconCls:'kcalc_16',tooltip: '<b>מחשבון</b><br />מחשבון שימושי',
       handler : this.createWindow,
       scope: this
      }
     },
     createWindow : function(){
      var desktop = this.app.getDesktop();
      var win = desktop.getWindow('calc-win');
      if(!win){
       var winWidth = desktop.getWinWidth() / 1.1;
       var winHeight = desktop.getWinHeight() / 1.1;
     
       win = desktop.createWindow({
        id: 'calc-win',
        title:' מחשבון ',
        iconCls: 'kcalc_16',
     
                    shim:false,
                    animCollapse:false,
     
                    constrainHeader:true,
                    layout:'fit',
        width: 405,
        height:460,
        border: false,
     
       // constrain: true,
        closeAction:'close',
       //  plain: true,
        modal : false,
        resizable: false,
        maximizable:false,
        items:[{
          layoutConfig:{
          border: false
         },items:[{
           header: false,
           layout: 'fit',
           border: false,
           width: 400,
           height: 430,
           swf: 'http://www.edulink.co.il/images/Calculator.swf',flashvars: {dataUrl: 'accountPerformance.xml', chartHeight: function(){ return this.body.getSize().height -0; }, chartWidth: function(){ return this.body.getSize().width -0;}},
           plugins: new Ext.ux.FlashPlugin()
            },{
          }]
           },{
        }]
       });
      }
      win.show();
    return win;
     }
    });
    //--------------------------------------------------------------------------------------------------------------------------
    my ext js site
    http://www.itoto4.com/

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

    Lightbulb Follow up...

    Follow up...


    There have been many Forum posts over the last two years concerning this issue. So, I've updated the first post of the thread with the ux.VisibilityMode plugin (already included, enabled, and applied in the ux.Media/Flash series, ux.Media.Chartpacks, and ux.ManagedIFrame extensions).

    For those seeking relief, simply include the plugin souce in your project and add the plugin to an appropriate Container position in your layout (whatever that might be).

    Generally, all you need do is something like this: (typical tabPanel example shown here)
    Code:
        
         var V = new Ext.ux.plugin.VisibilityMode({ elements:['bwrap']}) ;
         new Ext.TabPanel({
             plugins     : V,
             defaults    :{ plugins: V },
             items       :[....]
            });
    and the fixes will 'bubble up' your Layout heirarchy to solve most upstream reflow issues as well.

    Note:
    Because of the intensive position:absolute->relative transitions used in the Portal/Portlets Components, little can be done with a plugin to fix the problem. Until the Portal becomes a true absolute layout, your <OBJECT>, <IFRAME> content WILL continue to reload/break. (For any Flash charting and other objects, that usually means re-rendering the Flash object again after a portlet is moved.)

    Good Luck
    "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. #9
    Sencha User
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    0
    reza-rfr is on a distinguished road

      0  

    Default


    nice

  10. #10
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    bubby248 is on a distinguished road

      0  

    Default Iframes refreshing on Tab change in firefox

    Iframes refreshing on Tab change in firefox


    Iframes refreshing on Tab change in firefox.

    I had a flex application in which i am loading html urls as iframes under each tab using flex iframe third party component.Its working fine in IE and chrome.But in FF, these iframes are refreshing on each tab change.How can I get rid of this iframe refresh.I tried to call your uxvismode.js from html but no luck.
    Hopefully waiting for the reply.


    Thanks
    Bubby

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar