Sencha Inc. | HTML5 Apps

Blog

Ext JS 3.0 RC1.1 Released

May 04, 2009 | Aaron Conran

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. We appreciate our community of testers and supporters whom have made the stability of this release possible. Ext 3.0 is another leap forward providing increased performance, consistency, flexibility and UI enhancements to make you more productive - all without a significant size increase.

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.

Ext Core

The first major change to Ext JS 3.0 is that it has been built to sit on top of the new Ext Core library. Ext Core 3.0 is a lightweight library intended to give you all of the functionality to enhance a webpage. Drawing upon our experience creating rich user interfaces, we isolated the most powerful features used to enhance new or existing web pages and placed them in the Ext Core library. Developers familiar with Ext JS can leverage their existing skillset to provide an enhanced user experience to their web pages.

Winston Churchill once said, "We make a living by what we get, but we make a life by what we give." As avid members of the open source community, Ext continues to give back. This time, we are releasing Ext Core under the permissive MIT license to be used by all for free.

New UI Features

Ext JS 3.0 introduces several new UI Components and enhancements to many existing components.

New UI Components

  • RowEditor
  • ListView
  • Charting
  • ButtonGroup
  • GroupTabs

RowEditor

Editing a row in a grid just got a lot easier. The RowEditor is another great new UI component allowing you to rapidly edit full rows in a grid. You can even enable a validation mode which uses the new AnchorTips to notify the user of all validation errors at once.

Row Editor

ListView

ListView is a high performance, light-weight version of a grid like display. It provides you with selection, column resizing, sorting and other DataView features. The columns have percentage based widths and uses templates to render the data in any required format. If you need to show your data in a grid like display without some of the more advanced features of the Grid, then ListView is the perfect solution.

ListView

Charting

The Ext.chart package will allow you to visualize your data with flash based charting. Each chart binds directly to an Ext.data.Store. The new FlashComponent class, which extends BoxComponent, allows you to easily create custom Flash Components. By binding the charts directly to an Ext.data.Store, you don't have to worry about updating your chart, they will update automatically.

Charting

ButtonGroup

ButtonGroup is a new component that will allow you to group together Buttons of different sizes to create complex toolbars enabling your users to find the most common actions first. We created an example to show the flexibility and power of this new component.

Button Group

Sample code:

 
var btnGroup = new Ext.ButtonGroup({
       title: 'Clipboard',
       columns: 2,
       defaults: {
            scale: 'small'
       },
       items: [{
           xtype:'splitbutton',
           text: 'Add',
           iconCls: 'add16',
           menu: [{text: 'Add'}]
        },{
           xtype:'splitbutton',
           text: 'Cut',
           iconCls: 'add16',
           menu: [{text: 'Cut'}]
        },{
           text: 'Copy',
           iconCls: 'add16'
        },{
           text: 'Paste',
           iconCls: 'add16',
           menu: [{text: 'Paste'}]
        }]
     });
 

Grouped Tabs

Horizontal navigation can always be challenging. We've introduced GroupTabs to assist you in creating portal layouts similar to iGoogle, or providing a interface to access similar tasks quickly.

Group Tabs

Sample Code:

 
var viewport = new Ext.Viewport({
        layout:'fit',
        items:[{
            xtype: 'grouptabpanel',
            tabWidth: 130,
            activeGroup: 0,
            items: [{
                mainItem: 1,
                items: [{
                    title: 'Tickets',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Tickets tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }, {
                    title: 'Subscriptions',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Subscriptions tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }, {
                    title: 'Users',
                    iconCls: 'x-icon-users',
                    tabTip: 'Users tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }]
            }, {
                expanded: true,
                items: [{
                    title: 'Configuration',
                    iconCls: 'x-icon-configuration',
                    tabTip: 'Configuration tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }, {
                    title: 'Email Templates',
                    iconCls: 'x-icon-templates',
                    tabTip: 'Templates tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }]
            }]
        }]
    });
 

Enhanced Components

  • Buttons
  • Toolbar Overflow
  • Menu Overflow
  • AnchorTips
  • Buffered GridView
  • Debug Console

Buttons

Buttons in Ext JS 3.0 have been refactored to be a valid BoxComponent which enables them to partake in layout management. Buttons can now scale to any height or width and have advanced text positioning. Rather than being limited to only positioning buttons in a buttons configuration, they can now be placed anywhere you please.

Toolbar overflow

Toolbar Overflow

Toolbars can now create a menu for items that don't fit the visible toolbar area. The items in the menu still react with the same handlers as the toolbar items. This new behavior is turned on by default and can be disabled with the configuration option enableOverflow.

Toolbar overflow

Menu Overflow

Menus now also handle overflowing in a more gracious manner. Whenever a menu gets so long that the items won't fit the viewable area, it provides the user with an easy UI to scroll the menu. This feature is turned on by default and can be disabled by the configuration option enableScrolling.

Menu overflow

ToolTips

Tooltips now support an anchor configuration which will allow you to bring attention to a particular element or component with a small callout arrow.

ToolTip

Sample Code

 
new Ext.ToolTip({
        target: 'bottomCallout',
        anchor: 'top',
        anchorOffset: 85,
        html: 'This tip\'s anchor is centered'
    });
 

Buffered GridView

Buffered GridView enhances performance by waiting to render rows until they are visible. As your user scrolls away from content which is no longer visible, the BufferedGridView will clean up the old DOM markup to minimize the DOM structure. As a result of the smaller markup, the performance of resizing, forceFit, autoExpandColumn and other layout and DOM manipulation features in a large grid will improve substantially. Buffer GridView is limited to working on fixed height rows.

Buffer Grid

Debug Console

The Debug Console has been revamped and we have added three new tabs, named Component Inspector, Object Inspector and Data Stores which are specific to Ext Development. Component Inspector will show you all components which have currently been registered with the ComponentMgr and the parent child relationships among components. By mousing over a particular component you will notice that it will be masked on the page. The Object Inspector will allow you to inspect objects and peek inside their contents. The Data Stores tab will display all stores which have been registered with the StoreMgr and how many records are currently loaded into each store.

Debug Console

Summary

This blog entry covers all of the user interface components which are new to Ext JS 3.0 or which have been significantly enhanced. Stay tuned for another entry that details all of the non-ui related improvements such as Ext.data package enhancements, Accessibility improvements, Ext.Direct and the refining of memory management within Ext.

Upgrading

User upgrading to Ext JS 3.0, will be happy to hear there are little to no breaking changes. We took great care in only creating breaking changes where absolutely necessary. You may encounter issues upgrading if you were previously manipulating private properties of an Ext.menu.Menu or an Ext.Toolbar or if you had custom styling of an Ext.Button.

Following a tradition started with Ext 1.0, we are offering a pre-release sale with hefty discounts to upgrade your 2.x license. If you've thought about purchasing an Ext License, for a limited time, you can purchase online for less than an Ext 2.x License. There's no better time to support the Ext team.

There are 112 responses. Add yours.

David Davis

6 years ago

First!

Congrats, and thanks for all the hard work you guys put into Extjs 3.0

Gunmen

6 years ago

Wonderful!

Serkan Yer?en

6 years ago

Hi Jack,

Congratulations. I’ve been waiting so long. I especially liked the row editor and charts feature.

Thank you Ext Team. Keep up the good work.
BTW, Theme changer in the examples is not working smile

Dav

6 years ago

Fantastic work as always. Ext has raised the bar with this release

Pyja

6 years ago

Hi,

thanks for this new version..

What’s main differences between ListView and Grid (what is possible, and what is not) ?
When for the Final Release ?
And what’s about the ExtJs designer (we are all still waiting for) ?

Thanks for all…

Pyja

Kevin

6 years ago

What great news to wake up to!  I’m sharing this with the team as soon as I get into the office.  Love it!

Ext JS 3.0 RC1.1??????????? | Ajax??????????

6 years ago

[...] Ext JS 3.0 RC1.1??????????? ???????Ext JS?????????????? [...]

Hafeyang

6 years ago

Hi, I am expecting the extjs ide, you did a good job! 3q

ExtJS 3.0 RC1 | SOSYÖBEK

6 years ago

[...] Geli?mi? JavaScript kütüphanesi ExtJS bomba gibi özelliklerle nihai sürümün bir önceki a?amas? olan RC1 evresine ula?t?. [...]

galdaka

6 years ago

Congrats

Jay

6 years ago

This is excellent!  Keep up the great work guys.

Ext JS 3.0 RC1.1 Released « Eugene’s T

6 years ago

[...] Read the full article on Ext Blog [...]

Jose Voss (Brasil, Blumenau)

6 years ago

Great! Congratulations.
We are using the 2.2, Can we use the 3.0 without any fear?

Eugene

6 years ago

Congratulations, guys! And thank you very much for your hard work.

Brendan Carroll

6 years ago

First off, great work! Now can we get CDN updated to build/host a 3.0 RC1.1 version?

Omer Dawelbeit

6 years ago

Great work guys, thanks for such a pixel perfect, easy to use, fully documented, examples rich toolkit. I will upgrade my license straight away

manduks

6 years ago

wow! Esto es impresionante, despues de ExtJs el desarrollo en web no es igual. smile

AlbertKuehner

6 years ago

The row editor does not work for me in the IE 8. Sadly, it seems that the standard browser of Windows hasn’t been tested here or does it work for other people?

JELaVallee

6 years ago

Can’t wait to get digging into it.  Just in time for my project’s next big development phase.

cheers,
Etienne

StevenFranolla

6 years ago

ETA for the port to GXT for this?!?

petr p.

6 years ago

great, smile
very good job !

Brook

6 years ago

What about memory management / memory leak related stuff? I am surprised to not hear anything about improvements in that area…

Nash-t

6 years ago

Jack and the gang rocks! You guys are leading the charge. I can’t wait to see the designer when it comes out. Aaron, I mentioned to you a year or two ago that 3.1 was going to be the killer release. So far, so goooooood!

Marketing Guy

6 years ago

Awesome news! I use extjs on many of my websites and I am totally in love with it. I’ve been excited about this release for awhile now, i’m really hoping for some speed increases and more tools to use!

sosyxg

6 years ago

Good!

steve

6 years ago

Ext could really do with some more themes.. the appearance is great but it’s too vanilla.

zc

6 years ago

RC????????????

Alexis

6 years ago

Merci, excellent, continuez !

Niko

6 years ago

Great work! thanks again for Ext Team’s hard work.
Please keep on walking, you are leading the right way!

wddaff

6 years ago

????????????

Dimitris Menounos

6 years ago

Nice, I’d like to know what browsers (and which versions) are supported.

Vervorm

6 years ago

Hi,

I’m trying out the Extjs framework for the first time (So I’m a NOOB). I downloaded both the 2.2.1 and the 3.0 RC11 versions. I tried out the xml-tree-loader in the rc11 but it didn’t work.

It does work in the 2.2.1 version (even in IE7 with the ext-basex Ext.lib.Ajax enhancements from Doug Hendricks).

I know it’s a RC so I wanted to mention it.

Regards
Steven

dlems

6 years ago

Been waiting for this.
Performance wise, Buffered GridView and ListView are great additions.

James

6 years ago

Spectacular!

Alex

6 years ago

Ext Core, now this - early Christmas!

Crysfel

6 years ago

Excellent post!! thank you so much!!

energetix

6 years ago

???????? ??????, ??????. ???? ?????????? ??????!

Srujal Shah

6 years ago

Good Job!  Nice Features…Can’t wait to use it.

joey

6 years ago

Thanks to Extjs Team!!!

joey

6 years ago

??EXT3.0?????

myext

6 years ago

?????????grid??

griffiti93

6 years ago

Speechless !

js

6 years ago

Looks great, thanks!

Please think about releasing ExtJS under the lgpl licence again!

emre dagli

6 years ago

Thanks a lot for all ext members…

Not only hard worker developers but also members who share their codes and ideas.

Good job.

H.Baris Ozel

6 years ago

Congratulations!, Nice Features…

PS. There are some bugs with firefox (i.e. Portal Demo - Click the settings tool)

Molson Ice

6 years ago

What happen to the StatusBar? That should be listed as a breaking change.

MARTIN WIŠO » Blog Archive » Ext JS 3.

6 years ago

[...] is great to see that Ext JS team is working hard on features that reflects people needs. New release candidate looks very promising and especially Charting, ButtonGroup (Microsoft Office 2008 Ribbon  style;)), [...]

evenstar

6 years ago

so good waiting

Morgan

6 years ago

Great work guys.

???

6 years ago

??? ?? ????.. ^^)/

Johnathan Hebert

6 years ago

Are the docs available for 3.0?  If not, when will they be available?

Ajaxian » Ext JS in Action Excerpts and Disc

6 years ago

[...] Ext JS 3.0 RC1.1 Released [...]

???

6 years ago

Great news for ext js.

Ext JS in Action Excerpts and Discount; Ext JS 3.0

6 years ago

[...] Ext JS 3.0 RC1.1 Released [...]

Sandeep Sharma

6 years ago

Congrats! Good job.

Daily del.icio.us for May 2nd through May 7th | Vi

6 years ago

[...] Ext JS - Ext JS 3.0 RC1.1 Released - 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. [...]

Asp

6 years ago

Ogogo. Super! it’s very good

Frank Emrich

6 years ago

Great work guys. Do you have a Roadmap for 3.0?

Ext JS in Action Excerpts and Discount; Ext JS 3.0

6 years ago

[...] Ext JS 3.0 RC1.1 Released [...]

Carlo Pires

6 years ago

Your work is incredible. Thanks to you, people like me that would never play with such quality software can benefit from learning how to do rich web interfaces.

Original Sin

6 years ago

Looking forward to giving it a spin!
Have you guys placed it on Cachefly?

John Bouday

6 years ago

Wow I Love it
Tahnks

Leandro Rodrigues Chaves

6 years ago

Great work guys! ExtJs is the best!
I have just a question by now: the gradient effect on mouse over menu items has been removed in Ext 3.0 or is it missing?

Fenqiang Zhuang

6 years ago

Cool, lots of new feature - I like chart one best.

Hopefully your guys can make integrate with 2.2.1 smoothly. I try to update my running application from 2.2.1. However, my application is totally broken - make me feel bad, although I know it is pre-Arfa.

The Ashes » Blog Archive » Ext JS in A

6 years ago

[...] Ext JS 3.0 RC1.1 Released [...]

bug

6 years ago

This is a bug with Ext.MessageBox,in the line 180, this.updateText(msg), it calculate characters width error.

bee

6 years ago

Too bad, the chart is based on Flash while there’s another pure JS out there: JSCharts. Some people think that Flash requirement is not suitable to them.

Pascal

6 years ago

Hi, what became the StatusBar Object ?

Ext JS 3.0 RC1.1 brings a host of new features to

6 years ago

[...] Ext JS 3.0 RC1.1 comes hot on the heels of the release of Ext JS Core 3.0. Ext JS 3.0 is built to sit on top of Ext JS Core 3.0. Ext 3.0 is provides increased performance, consistency, flexibility and UI enhancements all without a significant size increase. [...]

Link Bundle - May 13 | franzone.com

6 years ago

[...] Ext JS 3.0 RC1.1 brings a host of new features to the table Weblenium gives a quick overview of the new features found in Ext JS 3.0 RC1.1. [...]

Alex

6 years ago

RowEditor don’t work with IE 7 and windows XP.

Sandip Bhoi

6 years ago

Lets see how much it is easier to replace lib 3.0 in place of 2.2 (mean backward compatibility)?

Andres

6 years ago

El rowEditor no esta en el la documentacion del api, y necesito modificarlo para que funcione con php.


The rowEditor doesn’t be in the api documentation, I need modify it to work with php.

Somebody can help me?

.(JavaScript must be enabled to view this email address)

sid

6 years ago

wow that was superb.

Rene A.

6 years ago

Very nice work - but the RowEditor has some bugs in IE version 7.0.5730.13CO

??

6 years ago

?????????

ExtJS 3.0 versiyon namzedi duyruldu

6 years ago

[...] Ext JS 3.0 RC1.1 duyruldu. Ext JS’nin 3. versiyonuyla ilgili ilk bilgileri edindi?imiz bu duyuru sayesinde, Ext JS’nin yak?n vadedeki durumuyla ilgili bilgi edinmi? olduk. [...]

jlake

6 years ago

ExtJS ????????????????????
????????????????????

???????????? ExtJS ??? “???” (method chain) ?

wys

6 years ago

????????????

shuager

6 years ago

???????

frank

6 years ago

“???” (method chain) ...?
Ext.Element.*?????????????this,???????????????

Billy M

6 years ago

Great. Waiting for final release !!

cabo

6 years ago

Guys very nice job. I’m starting to use this more and more.

namydragon

6 years ago

?????????????????????????????????

Ada

6 years ago

Excellent !
But row editor has some bugs when add new employee but cancel it finally, the new employee info still on the grid.

Manuel Ramirez

6 years ago

when is release version???? and Excellent work congratulations

Olivier Smeesters

6 years ago

Can’t wait to upgrade my app and see how shiny 3.0 is.

Some questions/remarks though:
- Ext.chart is using a Flash object. Why didn’t you use a Canvas ?
- Any plan to add a client-side drawing object (Canvas based) ?
- Buttons being table, they are not equivalent to the corresponding HTML element (it was already the case in 2.x). Any plan to fix this ?

Thanks.

Alex

6 years ago

On IE 7 (the most used browser today) :
- RowEditor has bug : impossible to have edit fields.
- ListView has bug : no multi selections.
- Charting has bug : we can load only one time page, after no datas are reloaded (chart empty)
- Grouped Tabs has bug : when we close the tabs, the content go up and stay visible (not hidden)

So half of the new features have problems today.
It’s not a RC1 but a beta again.

Alex

6 years ago

You should display somewhere than ExtJs is not more full compatible with IE products.

Arno

6 years ago

Great work people. We want to use the new version 3.0 in our new CMS! Because of the performance of 2.0 we didn’t used it before. What is the roadmap for 3.0? When will it be official released so we can use it in production?

Eugene

6 years ago

Agree to Alex:

VERY VERY beta product - a lot of functions does not work in IE.
I moved back to 2.0 after I tried 3.0 RC1.1…

Very upset :(

AND looking forward to see next version wink
You guys develop a very good product - everybody want to see new version ASAP wink

YooKaTiangy

5 years ago

looking forward to getting this version of ExtJs 3.0, Expect get more helps from this product.

The Paciello Group Blog » WAI-ARIA Implement

5 years ago

[...] has been reported that there are “Accessibility improvements - Section 508 and ARIA support” in Ext JS [...]

WAI-ARIA Implementation in JavaScript UI Libraries

5 years ago

[...] has been reported that there are “Accessibility improvements – Section 508 and ARIA support” in Ext JS [...]

WAI-ARIA Implementation in JavaScript UI Libraries

5 years ago

[...] has been reported that there are “Accessibility improvements – Section 508 and ARIA support” in Ext JS [...]

EXTJS.CN

5 years ago

??????

???

5 years ago

??????????

bizzit » Blog Archive » Apuntes del cu

5 years ago

[...] Paquete org.w3c.dom Especificación del core DOM Un ejemlo de DOM en JavaScript (gracias, Kike) Página de Ext js Curso de DOM DOM en ASP Ejemplo perl   « Apuntes curso [...]

Grzegorz Borkowski

5 years ago

How to use this new Console? I’ve found some example with old version, which was triggered by Ctrl-Shift-Home, but this doesn’t work for my application, neither in 2.2.1 nor 3.0; I have ext-all-debug.js included. Any hint how to open this console?

dekpitado

5 years ago

cha, no mamaen wey, pinche libreria cada vez me sorprende mas y ahora me salen con estas super mejoras, lo ke ocacionan es ke me baje la nueva version y me ponga a hacer pruebas YA !!. Muchas gracias !!!!!!!!!

kabin

5 years ago

thank you .very good.

Ext JS 3.0 ya está aquí | lobo_tuerto

5 years ago

[...] puedes ver una lista más detallada sobre lo nuevo. O revisar algunas de las cosas que puedes hacer con [...]

jeux gratuit

5 years ago

it dosn’t work with IE7 and safari.

Restore Deleted Files

5 years ago

Excellent !
But row editor has some bugs when add new employee but cancel it finally, the new employee info still on the grid.

??

5 years ago

We want to use the new version 3.0

Mädchen spiele

5 years ago

Great work people. We want to use the new version 3.0 in our new CMS! Because of the performance of 2.0 we didn’t used it before. What is the roadmap for 3.0? When will it be official released so we can use it in production?

free 3d wallpaper

4 years ago

Fantastic work as always

free 3d wallpaper

4 years ago

goood work

BRAIN500

4 years ago

Great work people. We want to use the new version 3.0 in our new CMS! Because of the performance of 2.0 we didn’t used it before. What is the roadmap for 3.0? When will it be official released so we can use it in production?

Prady

4 years ago

How can I see the examples in action?
None of the screen-shot links seem to be working.

Can someone suggest an alternative please?

Thank you,
Prady

sreee

3 years ago

how can I get resources file (css file must be)

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.