Blog

Ext JS 3.0 RC2 Release - Stable, Robust, and Enhanced

June 03, 2009 | Evan Trimboli

• Items are now automatically laid out when they are first shown - rather than trying to calculate dimensions when they are hidden. This will solve a number of layout issues that occur across all components.
• The toolbar overflow has been improved to support all toolbar items, including CycleButtons and Buttons with toggle enabled (both grouping and otherwise).
• Issues with some animations in the Fx library have been corrected.

New Examples

• A new example detailing the new REST support for stores has been included, which supports full CRUD operations.

 
// A single store using the Proxy, Reader and Writer together
// through a RESTful interface
var store = new Ext.data.Store({
       id: 'user',
       restful: true, // <-- This Store is RESTful
       proxy: proxy,
       reader: reader,
       writer: writer // <-- plug a DataWriter into the store just as you would a Reader
}); 

• An excellent demo illustrating the use of multiple providers together is now available. Here we use the Ext.direct polling to make regular requests to get the server's time. These requests can be interspersed with those of a remoting provider, which allows both an echo and a multiplication to take place.

 
<script type="text/javascript" src="php/api.php"></script> //Ext.app.REMOTING_API
 
<script type="text/javascript">
Ext.onReady(function(){
    Ext.Direct.addProvider(
            Ext.app.REMOTING_API,
           {
               type:'polling',
               url: 'php/poll.php'     //additional Provider
           }
     );
});
</script>
 

• An additional example demonstrates the new writer capabilities of Ext. It provides full CRUD support using a grid, without any use of Ext direct. It shows how the writer can be used with legacy style server interaction.

New Features

REST support

DataWriter

 
//define and we'll handle the rest
var proxy = new Ext.data.HttpProxy({
    api: {
        read    : 'app.php/users/read',
        create  : 'app.php/users/create',
        update  : 'app.php/users/update',
        destroy : 'app.php/users/destroy'
    }
});
 

Ext.Error

 
"DataProxy attempted to execute an API-action but found an undefined url / function.  
Please review your Proxy url/api-configuration."
 

 
"Could not locate your "root" property in your server response.  
Please review your JsonReader config to ensure the config-property "root" matches the property 
your server-response.  See the JsonReader docs for additional assistance."
 

We look forward to community input on where we should add additional checks based on your experiences.

Ext.direct interoperation with Ext.Component subclasses

Loading a tree using Ext Direct

 
Ext.app.REMOTING_API = {
    "url": "php/router.php",
    "type": "remoting",
    "actions": {
        "TestAction": [{
            "name": "getTree",
            "len": 1
        }]
    }
};
 

 
Ext.onReady(function(){
    Ext.Direct.addProvider(Ext.app.REMOTING_API); //setup provider
 
    var tree = new Ext.tree.TreePanel({
        width: 400,
        height: 400,
        autoScroll: true,
        renderTo: document.body,
        root: {
            id: 'root',
            text: 'Root'
        },
        loader: new Ext.tree.TreeLoader({
            directFn: TestAction.getTree //specify directFn on tree
        }),
        fbar: [{
            text: 'Reload root',
            handler: function(){
                tree.getRootNode().reload();
            }
        }]
    });
});
 

Forms and Ext Direct

 
var form = new Ext.form.FormPanel({
               api: {
                      load: App.ss.ClientForm.load,   
                      submit: App.ss.ClientForm.submit
                      },
                paramOrder: ['uid'],
                defaultType: 'textfield',
                items: [/* Ext.form.Fields go here */]
});