IE 8 Ext bug- searchSortBy?

I just ran into a problem with an ExtJS application I am building that involves a bug in ExtJS for Internet Explorer, or perhaps a bug in IE itself. I created an Ext ComboBox with an ID of searchSortBy. When referencing the ComboBox by ID in a save function, I set a local variable:

   var ssb = Ext.getCmp("searchSortBy");

Which works just fine. But referencing:

   ssb.getValue();

yields an error of "Object does not support this property or method", meaning that the object being referenced is not the same as the object that I created. A simply ID change solved the problem, but it serves as a reminder of the continuing complexities of Javascript-basedWeb application UIs.

ExtJS Tree with Context Menu

I've been playing with the tree control in ExtJS, with an eye toward building a decent tree control to handle management of tree-based content, generally web pages in a basic web site layout. After some experimentation, I put together a tree that has a context menu and supports drag and drop of nodes. I am looking to extend it to enable drag and drop for external objects into the tree. 

Here is a screenshot, right click and select "View Image" to see a full size version:

click for full size image

Introducing the Colony application platform

For the past three years, I have been working on and off on an open-source CFML-based Web application. It  started out as a simple system to store arbitrary structured and unstructured content. I started using it to build more and more complex Web applications, and over time it grew in size and scope. I thought about it for awhile as a content management system, but content management is not what I was aiming for, and not where the platform has really evolved.

After struggling with terminology and purpose, I started thinking about the application as an application platform. What is that? I see it as an implementation of typical application patterns in an integrated package that allows a develoepr to use it in whole or in part, building on the core libraries to create a new solution. 

Once I had the concept clear in my head, I started casting about for a name. After lots of pondering and brainstorming sessions with my colleagues on the CF-Community list, I decided to call the platform Colony. To me, Colony is all about staking out new territory on the Web, building compelling new services, and advancing the state of software.

Colony is also about shared effort and shared reward. To that end, we have just released the platform in alpha under the Apache Software License 2.0. You can get the alpha code and see more about the platform at www.cfcolony.org. The site is graphically challenged and light on content at the moment, but that wil cahnge soon. 

Ext.History as a Controller for JS Applications

We have been implementing an ecommerce solution using the ExtJS framework, and one of the challenges our clients asked us to meet was to enable Back button support in the fully AJAX-enabled UI. After looking around at possible solutions, I decided to implement the Ext frameworks' Ext.History class as the history provider. Some example code at the Ext site gave me an idea - that it is possible to use the History class on() method to build a controller for a JS application that respects the Back button, allows bookmarking, and provides centralized application flow.

Here is my initial implementation:

     Ext.onReady( function() {
   
        //initialize the History provider
        Ext.History.init();
        //use forward slash for the delimiter
        var delim = '/';

        //set the on('change') event to act as the controller for browser history
        Ext.History.on('change', function(urlString){
            if(urlString){
                var arguments = urlString.split(delim);
                switch(arguments[0]){
                    case 'getPage':
                        getPage(arguments[1],arguments[2]);
                        break;
                    case 'doSearch':
                         doSearch(arguments[1],arguments[2],arguments[3],arguments[4],arguments[5]);
                    break;
                }

            }else{
                //reset the page
                setDefaults();
            }
        });


A typical call to a function that I want to track then changes from a direct call to the function to a call to Ext.History.add, so:

    getPage(#rootnode.objectid#,'webPage')

becomes

    Ext.History.add('getPage/#rootnode.objectid#/webPage');

and now I have a controller for the JS application. I may need to re-structure some code to make it neat and tidy, but I can now see the core of a well-structured solution taking shape.

BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.