Results 1 to 10 of 10

Thread: preload tab with flash content

  1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    137

    Default preload tab with flash content

    Hello,

    I have a website that uses tabs. Some of the tabs have flash content on then. What I want to do is have a tab with flash content on it but make it "invisible". Basically "preload" the flash and then when the time is right, make the tab visible again.

    I know how to toggle the's tab invisible/visible parameters but the flash content doesnt actually load until I manually click the tab. Any ideas on how to "preload" the flash on a tab without having to click on it first?

    Thanks.

  2. #2
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Easiest way is to render such tabs using hideMode:'offsets' (Flash objects will not initialize using Ext's default hideMode:'display' when hidden), then add them to your tabPanel when called for.
    "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.


  3. #3
    Sencha User
    Join Date
    Sep 2007
    Posts
    137

    Default

    well I already have this setting in the TabPanel:

    Code:
    defaults: Ext.apply({},Ext.isGecko? {style:{position:'absolute'},hideMode:'visibility'}:false)
    I have this code so that it will not reload the iframe/flash in FireFox when you are toggling the tabs.

  4. #4
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Question

    Quote Originally Posted by rballman View Post
    Hello,
    Any ideas on how to "preload" the flash on a tab without having to click on it first?
    Are you referring to IE's flash plugin "user click-to-activate strategy"?
    "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

    Default

    Yes I have the EXACT same "problem" as the OP. curious to see the solution!

  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    137

    Default

    Quote Originally Posted by hendricd View Post
    Are you referring to IE's flash plugin "user click-to-activate strategy"?
    no i dont believe these are the same

  7. #7
    Sencha User
    Join Date
    Sep 2007
    Posts
    137

    Default

    Maybe I can explain again...

    We have a tab with an iframe that loads a flash object. The flash takes 10 seconds to load. So when you select the tab you have to wait 10 secnds.

    Is there anyway to make it start loading before the tab is selected so the user can avoice this 10 second wait?

  8. #8
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Lightbulb Ah, clarity!

    See TabPanel: deferredRender config option.
    That renders the tab contents as soon as the tabPanel is rendered.
    "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
    Mar 2009
    Posts
    356

    Default

    maby try to use FlashPlugin

    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);
        };
    };
    &&&&&&

    Code:
    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()
    my ext js site
    http://www.itoto4.com/

  10. #10
    Sencha User
    Join Date
    Sep 2007
    Posts
    137

    Default

    Quote Originally Posted by hendricd View Post
    See TabPanel: deferredRender config option.
    That renders the tab contents as soon as the tabPanel is rendered.
    ya i have this set to false and it still doesnt work. i guess i will try the flashplugin example

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •