Jon's Blog » ExtJS 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 Building Admin Tools With JavaScript and PHP http://bombdiggity.net/blog/2008/06/24/building-admin-tools-with-javascript/ http://bombdiggity.net/blog/2008/06/24/building-admin-tools-with-javascript/#comments Tue, 24 Jun 2008 15:29:45 +0000 Jon http://www.bombdiggity.net/blog/?p=22 So part of my job at the Indianapolis Motor Speedway is writing Admin Tools for our users to administer the sites with.  There are a mix of older admin tools which don’t use any JavaScript and newer admin tools where the front end is completely based on JavaScript.

I was recently asked to build an admin tool to allow one of our users to maintain the drop down portions of the site navigation since they can change with each passing event that happens at the track. This presented the following problems:

  • Navigation is stored in a XML file
  • The navigation XML file is versioned with Subversion
  • The admin had to be easy to use.

What I started with was trying to figure out the whole svn integration thing as I had to figure out a way to make sure that the working copy was always current and that when the user saved the navigation it did a commit on the file to that way it would always be the latest version in the repository.

Problem 1: SVN does not allow you to checkout a single file to be a working copy.  I found this to be a problem as I didn’t want the whole directory, I just wanted the navigation.xml file.  I did some searching on the SVN bug tracker and found a perl script that David Kilzer wrote that allowed me to check out a single file.  Problem 1 is solved.

Once I got the file checked out into the working directory on the server i preceded to write a shell script that updated the file via an svn up command that would be ran on my fetch script before I read in the XML file to pass it back to the JavaScript.

Now that I have the XML back in my front end i can display it. Here is what the admin tools looks like when you have selected which site you want to edit.

IMS Sites Navigation Admin

As you can see from the screen shot everything is layout in an easy to browse tree view.  You can move the child nodes around to order then or place them in any parent menu that you like.  There is a simple edit and add features.  The adding also incorporates a feature from our Site Pages admin that allows you to select from a page in there so you don’t have to copy and paste a link from the pages admin to this admin.

Once the user gets done with any changed they may have they can select the save button and that passes it back off to the PHP backend where it writes out the xml file and then does an svn ci on the file which places it back in the SVN repository and also promotes it to production via a set of PHP and bash scripts to interface with the SVN repository.

All in all using the ExtJS Library and PHP to build the admin tools for the IMS sites has dramiticly cut down on the time it takes to do everything since I have a very good understand of how everything in ExtJS works and when I don’t there is a great documentation resource out there.

]]> http://bombdiggity.net/blog/2008/06/24/building-admin-tools-with-javascript/feed/ 0 WiiExtJS: Building Ajax apps that run on the Wii Opera browser http://bombdiggity.net/blog/2008/06/06/wiiextjs-building-ajax-apps-that-run-on-the-wii-opera-browser/ http://bombdiggity.net/blog/2008/06/06/wiiextjs-building-ajax-apps-that-run-on-the-wii-opera-browser/#comments Fri, 06 Jun 2008 12:20:26 +0000 Jon http://www.bombdiggity.net/blog/?p=18 Shea Frederick has posted on building Wii-friendly web pages using the ExtJS library.

Shea focuses on the various issues that come up when building something for the Wii resolution, screen size, input types, and more.

For example, check out the layout:

Ext.ns('Ext.ux.layout');
Ext.ux.layout.wii = Ext.extend(Ext.layout.FitLayout, {
    setItemSize : function(item, size){
        var viewSize = Ext.getBody().getViewSize();
        this.container.addClass('ux-layout-wii');
        item.addClass('ux-layout-wii-item');
        size.height = (viewSize.height-60);
        size.width = (viewSize.width-60);
        item.setSize(size);
    }
});
Ext.Container.LAYOUTS['wii'] = Ext.ux.layout.wii;

And then you can detect the Wii to set this layout:

Ext.isWii = navigator.userAgent.toLowerCase().indexOf("wii") > -1;
var layout = 'fit';
var title = 'Normal';
if (Ext.isWii) {
    layout = 'wii';
    title = 'Wii';
}
]]> http://bombdiggity.net/blog/2008/06/06/wiiextjs-building-ajax-apps-that-run-on-the-wii-opera-browser/feed/ 0