Jon's Blog » flash http://bombdiggity.net/blog Ramblings of a php coder Fri, 14 May 2010 17:36:14 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 SWFUpload with Ext JS Buttons http://bombdiggity.net/blog/2009/01/16/swfupload-with-ext-js-buttons/ http://bombdiggity.net/blog/2009/01/16/swfupload-with-ext-js-buttons/#comments Fri, 16 Jan 2009 14:52:12 +0000 Jon http://www.bombdiggity.net/blog/?p=78 For the longest time I am have been using Ext JS to write the Administration Tools for the Indianapolis Motor Speedway and the Indy Racing League where I work. Some of the tools required uploading of large files to where I would use the SWFUpload library to achieve this functionally. With the introduction of Flash 10 to where you can not have JavaScript call the method to open the dialog box any more this presented a problem. The generally accepted workaround is to have the flash object be transparent and over the button but this doesn’t allow the button to have events or allow you to do hover overs and the such, Until Now.

I spent a few hours working on this to get the example working to where you still have the basic functionally of the button (events and hover) but you still get the flash dialog to open. What I did to achieve this is place the flash object over the underlying <button> that is in the Ext Button.

Here is my html code:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Flash Ext JS Button</title>
        <link href="/js/ext2.2/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/js/ext2.2/ext-base.js"></script>
        <script type="text/javascript" src="/js/ext2.2/ext-all.js"></script>
        <script type="text/javascript" src="/js/swfupload/swfupload.js"></script>
        <script type="text/javascript" src="/js/swfupload/plugins/swfupload.swfobject.js"></script>
        <script type="text/javascript" src="/js/swfupload/plugins/swfupload.queue.js"></script>
        <script type="text/javascript" src="./button.js"></script>
        <style type="text/css">
            .swfupload {
                position: absolute;
                z-index: 1;
            }
        </style>
    </meta></head>
    <body>
        <div style="padding: 20px;">
           <div id="btnHolder"></div>
           <br /><br />
           <div id="btnEvent"></div>
        </div>
    </body>
</html>

button.js file:

Ext.onReady(function(){
    new Ext.Button({
        renderTo: 'btnHolder',
        id : 'btnClick',
        text: 'Open Download Dialog',
        listeners : {
            'click' : function(){
                Ext.fly('btnEvent').update('Button Click Fired');
                (function(){
                    Ext.fly('btnEvent').update();
                }).defer(2000);
            },
            'render' : function(btn) {
                Ext.get('btnClick').child('em').insertFirst({tag: 'span', id: 'btnUploadHolder'});
                SWFUpload.onload = function () {
                      var settings = {
                          flash_url : "/js/swfupload/swfupload.swf",
                          upload_url: "/upload/postfile",	// Relative to the SWF file
                          file_size_limit : "20 MB",
                          file_types : "*.jpg",
                          file_types_description : "Image Files",
                          file_upload_limit : 20,
                          file_queue_limit : 20,
                          debug: false,

                          // Button Settings
                          button_placeholder_id : "btnUploadHolder",
                          button_width: Ext.get('btnClick').child('button').getWidth(),
                          button_height: Ext.get('btnClick').child('button').getHeight(),
                          button_cursor : SWFUpload.CURSOR.HAND,
                          button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,

                          // SWFObject settings
                          minimum_flash_version : "9.0.28"
                      };

                      swfu = new SWFUpload(settings);
                  };
            }
        }
    });
});

Basically what I do is have it insert the flash object on the render event of the button or the Ext Component that contains the button I want to render it to.

Click here for a working sample

Let me know of any questions in the comments.

]]> http://bombdiggity.net/blog/2009/01/16/swfupload-with-ext-js-buttons/feed/ 8