We are pleased to announce that Ext 3.0.0 is now available for download.
http://extjs.com/products/extjs/download.php

We are working on the official blog post to notify the general public. Some exciting new upcoming changes are:
* A more rigorous release schedule ensuring quality builds
* New Development practices separating trunk and patch branches
* Bi-weekly patch builds for support subscribers
* A QA Team to monitor changes in the source code and provide testing
* A new cross platform build process
* An executable doc application
* A public SVN Commit log to see what changes are being made even if you don’t have a support subscription

via Aaron Conran

Ext JS 3.0 RC3 is now available.

Downloads: http://extjs.com/products/extjs/download.php
Examples: http://extjs.com/deploy/ext-3.0-rc3/examples/
Docs: http://extjs.com/deploy/ext-3.0-rc3/docs/

Ext JS 3.0 Final will be released on Monday.

via Aaron Conran

I recently released Ext.Direct server-side stack implementation for ASP.NET MVC. You can read about it and download the source in this topic. I will be posting there and updating the first post about any changes. If you are not yet familiar with Ext.Direct, it is a package in Ext JS 3.0 that makes communication between your client and server extremely easy. You can read about it in this official blog post.

We are pleased to announce that the latest release candidate of Ext 3.0 is now publicly available. We are very proud of the stability of this release. We’d like to thank our support team and elite community members who have tested the release candidates. You have assisted in squashing a number of bugs affecting both Ext Core and Ext JS. The time taken to report issues and create test cases is much appreciated. The list of issues resolved for this deployment can be found for Ext Core and Ext JS separately.

Read the full article on Ext JS Blog

Ext Bug Fixes for 3.0-rc2

In Ext JS 2.x if you needed to get a reference to a Component which was nested deep inside a Container and you had a reference only to this Container, you could either assign that Component a unique id and use it with Ext.getCmp() or call a particular method of the Container and, if necessary, methods of other nested containers depending where the Component is in that hierarchy. Ext JS 3.0 makes it a little easier with the new itemId config (see my previous post).

In addition to itemId another new configuration option is introduced in Ext JS 3.0 which is supposed to completely eliminate problems like the one described above. The name of this config is ref.

ref is a path specification, relative to the Component’s container (ownerCt) specifying into which ancestor Container to place a named reference to this Component. The ancestor axis can be traversed by using ‘/’ characters in the path. For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

In the code above, if the ref had been 'saveButton' the reference would have been placed into the Toolbar. Each ‘/’ in the ref moves up one level from the Component’s ownerCt.

Think about places where you could benefit from this config. It’s a small thing that has huge impact.

In Ext JS 2.x if you need to access any component anywhere in your code and you don’t have an object reference available, you have to assign that component an id and later pass it to Ext.ComponentMgr.getCmp() method (or its alias Ext.getCmp()) to retrieve the reference to the component. Since Ext JS uses a global MixedCollection to store components’ id’s, you must use unique id for every component that you create. While it has worked for most developers, it is often hard to keep track of used ids, especially if you are a member of a bigger team that works on one project.

In Ext JS 3.0 an itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp(), use itemId with Ext.Container.getComponent() which will retrieve itemId’s or id’s. Since itemId’s are an index to the container’s internal MixedCollection, the itemId is scoped locally to the container, avoiding potential conflicts with Ext.ComponentMgr which requires a unique id.

var c = new Ext.Panel({
    height: 300,
    renderTo: document.body,
    items: [{
        itemId: 'p1',
        title: 'Panel 1',
        height: 150
    }, {
        itemId: 'p2',
        title: 'Panel 2',
        height: 150
    }]
});

var p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
var p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

As developers, we spend countless hours researching best practices to build engaging software. Often we find ourselves implementing the same repetitive functionality to wire our frontend to our backend. We’ve become accustomed to partaking in complicated design patterns to help separate logic from presentation – forcing the browser to play the role of a dumb terminal. While the RIA movement has unshackled the web browser from that awful fate, accessing our server side logic remains mostly unchanged. Ext.Direct aims to solve this issue for developers creating Ext JS applications by providing a single communication point with the server-side.

Read the full article on Ext Blog

Ext.Direct Remoting Specifications

Rendering a panel or a window that has a footer that contains action buttons, is a very common task for UI developers. This tutorial demonstrates how to use the new and still undocumented fbar configuration option in Ext JS 3.0 for advanced footer rendering.

Preface

In Ext JS prior to version 3.0 you had to use buttons configuration option to define your buttons and buttonAlign option to align them either to the left, center or right.
Although you could render other components in a footer by passing their instances, you could not split them apart, and also you could run into different rendering or behavior issues.

Another way to create a footer was to use bbar configuration option to create a bottom Toolbar.

But a Toolbar was not meant to be used as a footer and does not look like one either. Starting from Ext JS 3.0 you can use the new fbar configuration option to achieve the desired result.

What is fbar?

fbar is very similar to bbar, except that it creates a real footer rather than a bottom Toolbar. Currently it supports rendering of true buttons and other components, plain text, spacers, and a fill to split groups of components apart. Separators are rendered as spacers (blank space). Keep in mind that the only way fill is going to work is if you set buttonAlign config option to left.

Here is the code I used for this example:

new Ext.Window({
    title: 'Test Window',
    width: 500,
    height: 120,
    buttonAlign: 'left',
    fbar: ['Options:', {
        xtype: 'trigger',
        emptyText: 'Please select'
    }, '->', {
        text: 'Update'
    }, {
        text: 'Cancel'
    }]
}).show();

As you can see the syntax is identical to tbar or bbar, but the result is very different. It is a real footer with a plain text and a trigger field on the left, two true buttons on the right and a fill in the middle. To build a footer that would look exactly like this in Ext JS 2.x would require you to have a container with a few levels of nesting inside. With fbar suffer no more!

Live example.

This tutorial demonstrates how to use Ext.Editor to implement inline editing of static text on a web page. Ext.Editor is a base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.

Getting started

The first thing we need to do is to render the actual element containing the text, that we would like to be edited, and assign it an ID.

<div id="title">Lorem Ipsum</div>

Setting up Ext.Editor

Two simple steps are required to make Ext.Editor work. First, we create an instance of Ext.Editor. The only required configuration option is field, that can be either a Field object (or its descendant) or a config object for field.

var editor = new Ext.Editor({
    field: {
        xtype: 'textfield'
    }
});

Second, we call the startEdit() method of out Editor instance and pass the element to edit, or its ID. This method starts the editing process and shows the editor.

Ext.get('title').on('click', function() {
    editor.startEdit(this);
});

Looks simple, right? Well, in essence it is all you need to achieve the effect of an editable content on your page. However, if you run this code as is, you will not get precisely what you expect. The editor will appear in the center of the div. The content of our element remains unchanged after you are done editing. And lastly, you probably want to save the updated text somewhere on the server, for example in a database.

Configuring Ext.Editor

Let’s take a look at more complete example:

var editor = new Ext.Editor({
    field: {
        xtype: 'textfield'
    },
    autoSize: true,
    updateEl: true,
    cancelOnEsc: true,
    completeOnEnter: true,
    listeners: {
        startedit: function(boundEl, value) {
            this.boundEl = boundEl;
        },
        complete: function(editor, value, startValue) {
            if (value === startValue) return;
            // otherwise save your change,
            // for example by making AJAX request
            // Ext.Ajax.request(...);
        }
    }
});

Most of the configuration attributes are self-explanatory, but I will quickly go through them anyways. autoSize:true resizes the editor field to the size of the bound element. updateEl:true makes sure the bound element is updated when editing process is complete. cancelOnEsc:true hides the editor field and shows the original content without making any change when the user hits Esc key. completeOnEnter:true hides the editor field and updates the content of the bound element (if updateEl is true) when the user hits Enter key, otherwise the user has to click outside of the editor field.

Events

Ext.Editor exposes several events. The two important ones are startedit and complete. The good thing about Ext.Editor is that it is not tied to a single element and therefore one instance can be used to edit multiple elements. When startedit event is fired it is passed a reference to the bound element, so you can store it in the editor object (this.boundEl = boundEl;) and access it later from the complete event handler in order to save the change. Note, that complete event fires even when no change has been made to the original content, so to avoid unnecessary remote calls you should compare value and startValue (the two arguments passed to the event handler) before executing any code that saves the change, like in the example above.

Last thing you might want to do is to use the same font family and size in both the element and editor field, add some padding etc. This can easily be done with a little CSS code.

Summary

Ext.Editor is indeed a very handy little guy that can save a lot of pain if you try to implement something like this yourself. And why would you do crazy thing like this in the first place if there is Ext JS Have fun with it!

Live example.

It is my first tutorial, so any constructive criticism is accepted and appreciated. Thank you.

The Ext Team is proud to announce the release of Ext JS 3.0 RC1.1 available for immediate download. This new version of the Ext framework is the culmination of many long hours of dedication by the Ext Team.

There are many enhancements in Ext JS 3.0, too many to include in a single post. Some of the major features in Ext JS 3.0 are the splitting of Ext Core and Ext JS, Charting for visualizations, additional User Interface improvements, CRUD-like support with Ext.data.DataWriter, Remoting using Ext.Direct, CSS enhancements to make theming easier, and Accessibility improvements – Section 508 and ARIA support. We also fixed several browser issues for the latest Chrome and Safari releases and added IE8 support.

Read the full article on Ext Blog

Updated links to the samples and docs:

Ext JS 3.0 Samples & Demos
Ext JS 3.0 API Documentation