From Sencha - Learn

Contents 1 Information 2 Example Usage 3 To Do 4 Source

Information

This Extension is based off the functionally of SWFObject. The only parts not included are the ExpressInstall Feature and the Version Checking (Coming Soon).

Example Usage

var swf = new Ext.ux.Swiff("so_tester.swf",{
    width: 300, // width of the flash object
    height: 300, // height of the flash object
    vars: {flashVarText: "this is a sample text"}, // varialbes to be passed into the flash
    params: { menu: false }, // different param tags
    bgcolor: "#FF6600", // what's the bg color
    renderTo: "flashcontent" // where to render the flash to
});
 
// if you did not use the renderTo option you can do the following as the swf object is an Ext.Template
swf.overwrite(<some element id>);

To Do

• Better Documentation
• Minimum version checking

Source

Ext.namespace("Ext.ux");
 
/**
  * Ext.ux.Swiff Class
  *
  * @author  Jon Whitcraft
  * @version 1.0 alpha
  *
  * @class Ext.ux.Swiff
  * @constructor
  * Creates new Ext.ux.SWFUpload
  *
  * @cfg {String} source Path to *.swf
  * @cfg {object} options
  * @return {object} Ext.Template Object
  */
 
Ext.ux.Swiff = function(source, options) {
    if(!Ext.ux.Swiff.fixed) Ext.ux.Swiff.fix();
    var instance = Ext.ux.Swiff.nextInstance();
    Ext.ux.Swiff.vars[instance] = {};
    var options = Ext.apply({
        width: 1,
        height: 1,
        id: instance,
        renderTo: null,
        params : {
            allowScriptAccess: "sameDomain",
            quality: "high"
        },
        callBacks: false,
        vars: false,
        bgcolor: false
    }, options || {});
 
    options.properties = {
        id: options.id,
        width: options.width,
        height: options.height
    };
 
    if(options.bgcolor) options.params.bgcolor = options.bgcolor;
 
    var append = [];
 
    for (var p in options.callBacks) {
        Ext.ux.Swiff.vars[instance][p] = options.callBacks[p];
        append.push(p + '=Ext.ux.Swiff.vars.' + instance + '.' + p);
    }
 
    var swf = source + '?' + append.join('&');
 
    if (options.vars) options.params.FlashVars = Ext.urlEncode(options.vars);
 
    obj = Ext.ux.Swiff.getFlashCreate(swf,options);
 
    if(options.renderTo && Ext.fly(options.renderTo) != null) {
        obj.overwrite(options.renderTo);
    }
 
    return obj;
}
 
Ext.apply(Ext.ux.Swiff, {
 
    count: 0,
    callBacks: {},
    vars: {},
    fixed: false,
 
    nextInstance: function(){
        return 'Swiff' + this.count++;
    },
 
 
    /*
 
    */
    fix: function(){
        Ext.ux.Swiff.fixed = true;
        var w = Ext.fly(window);
        w.on({
            "beforeunload" : {
                fn : function() {
                    __flash_unloadHandler = __flash_savedUnloadHandler = function(){};
                }
            },
            "unload" : {
                fn : function() {
                    if(Ext.isIE) {
                        var objs = Ext.query("object");
                        for(var o in objs) {
                            objs[o].style.display = "none";
                            for (var s in objs[o]) {
                                if (typeof objs[o][s] == 'function') objs[o][s] = function(){};
                            }
                        }
                    }
                }
            }
        })
 
        return;
    },
 
    /*
    Function : Ext.ux.Swff.getFlashCreate
           returns the template object that is the proper code to put the flash on the page.
    */
 
    getFlashCreate: function(source, options) {
        var createObj = {};
        // create object for
        if(Ext.isGecko) {
            createObj = {
                tag:'embed',
                type:'application/x-shockwave-flash',
                src:source
            };
 
            Ext.apply(createObj, options.params || {});
            Ext.apply(createObj, options.properties || {});
        } else {
            createObj = {
                tag:'object',
                classid:'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000',
                children:[
                    {tag:'param', name:'movie', value:source}
                ]
            };
 
            Ext.apply(createObj, options.properties || {});
            for(var p in options.params) {
                createObj.children.push({tag:'param',name:p, value:options.params[p]});
            }
        }
 
        return Ext.DomHelper.createTemplate(createObj);
    },
 
 
    /*
    Function: Ext.ux.Swiff.getVersion
        gets the major version of the flash player installed.
 
    Returns:
        a number representing the flash version installed, or 0 if no player is installed.
    */
 
    getVersion: function(){
        if (!Ext.ux.Swiff.pluginVersion) {
            var x;
            if(navigator.plugins && navigator.mimeTypes.length){
                x = navigator.plugins["Shockwave Flash"];
                if(x && x.description) x = x.description;
            } else if (window.ie){
                try {
                    x = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
                    x = x.GetVariable("$version");
                } catch(e){}
            }
            Ext.ux.Swiff.pluginVersion = (typeof x == 'string') ? parseInt(x.match(/\d+/)[0]) : 0;
        }
        return Ext.ux.Swiff.pluginVersion;
    },
 
    /*
    Function: Ext.ux.Swiff.remote
        Calls an ActionScript function from javascript. Requires ExternalInterface.
 
    Returns:
        Whatever the ActionScript Returns
    */
 
    remote: function(obj, fn){
        var rs = obj.CallFunction("<invoke name=\"" + fn + "\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments, 2) + "</invoke>");
        return eval(rs);
    }
});
 
ExtSwiff = Ext.ux.Swiff;

This page was last modified on 29 October 2007, at 10:31. This page has been accessed 23,424 times.