Blog

Announcing Ext JS 3.3 Beta - PivotGrids, Calendars and More

July 28, 2010 | Ed Spencer

We are pleased to announce the availability of Ext JS 3.3 beta 1 for immediate download. This release introduces great new components and over 160 enhancements and bug fixes.

Download Ext JS 3.3 beta
PivotGrid

Introducing the PivotGrid

The first component we'd like to introduce is the PivotGrid. PivotGrids are a data summarization tool that are great for breaking large datasets down into an understandable format. PivotGrids allow you and your users to summarize data by any number of fields; easily breaking down sales data by city, for example, or by year and quarter. Check out an example of PivotGrid in action where we summarize sales data. PivotGrids fit in with your existing Stores and take just a few lines of code to create. We have created a series of examples demonstrating their varying configurations. Here's just a quick example of how code to create the above pivot table looks.

 
var pivotGrid = new Ext.grid.PivotGrid({
    title     : 'PivotGrid example',
    store     : myStore,
    aggregator: 'sum',
    measure   : 'value',
 
    leftAxis: [
        {dataIndex: 'person',  width: 80},
        {dataIndex: 'product', width: 90}
    ],
 
    topAxis: [
        {dataIndex: 'year'},
        {dataIndex: 'city'}
    ]
});
 
Calendar Components

Calendar Components

Many in the community have asked for officially supported Calendar components. Calendars are an open-ended problem: there are many ways to implement them and many features that could be added. In Ext JS 3.3 we present new components for displaying events by day, week and month, all combined into a sample application. As with PivotGrid, the new Calendar components are powered by the existing data package, which means they fit right in with existing code. We're not including the calendar components in ext-all.js just yet but include a built version of the components in the examples/calendar directory in the SDK.
Grid Action Column

Everything Else

In addition to the components above the grid has received a new column type: ActionColumn. This column type enables you to easily add action icons with a handler function into any grid. As with every release, backwards-compatibility is a high priority for us; upgrading from 3.1 or 3.2 should be straightforward. To enable PivotGrid a few changes were made to GridView which are known to cause incorrect behavior in certain situations, though these will be addressed before 3.3 final.
We hope you enjoy testing this beta release and look forward to your feedback. Ext JS 3.3 will be the final big release before 4.0 so we wanted to make this one special. We'll use a slightly longer release schedule than usual to ensure any wrinkles are ironed out for Ext JS 3.3 final.

There are 58 responses. Add yours.

Mitchell Simoens

2 years ago

Nice! Especially love the ActionColumn!

Jay Robinson

2 years ago

Excellent! Happy birthday, Ed!

Americo Savinon

2 years ago

That’s great. Calendar looks pretty sexy

Animal

2 years ago

Congratulations guys. That Calendar is a great job!

I know you all worked hard on this!

PHPScriptor

2 years ago

Waw, two components I was waiting for: the calendar and actionColumn.

thanks guys!

DB

2 years ago

Calendar looks really good!
Thanks for your hard work.

Loiane

2 years ago

Great work guys!
These new features are fantastic!

Sphink

2 years ago

Makes me feel bad for using gxt, =]

eugs51

2 years ago

Thank you!

Stju

2 years ago

Action column is just awesome!
Excellent job as usually!

yagi

2 years ago

Wow.., it’s great…
Pivot Grid, that’s i’m looking for..

Thanks…

nickevin

2 years ago

cool, really cool. enjoy it.

dreas

2 years ago

Good stuff! One thing that catched my eye though is that there’s no cursor style on actionColumn icons. This should get implemented.

aditia

2 years ago

I’ve been waiting for the action column, really great improvement

Conor

2 years ago

Great work guys.  Especially the calendar component.  I’ve a client torturing me at the moment to include a calendar component and other that writing one from scratch the only viable alternative was the Feyasoft one.  Problem is Feyasoft’s one is way too slow and the code is a mess.  Good that this has been solved by people who know what they’re doing.  (Sorry about the slight slate Feyasoft - your other stuff is great by btw wink )

On another note, I was just thing yesterday about how much activity there has been recently RE Sencha Touch, all the HTML 5 blog posts etc.  I was kinda getting the feeling that ExtJS was taking a back seat.  Possibly exacerbated by the news that Jack was leaving/taking a more backward role.  The new beta shows that this in not the case.

Keep up the good work guys.  We’ll show those jQuery guys!!!!

Christian

2 years ago

Good stuff !! keep up the good work smile i love the calendar and actionColumn

Uli Stärk

2 years ago

You can read minds. Great work!

Christiaan

2 years ago

Nice one on the PivotGrid. I’m going to test implement it in a reporting tool I was working on. Now the reporting tool generates sql statements with ‘group by’ for row labeling and ‘sum(case when field=value then 1 else 0 end), etc’ for column labeling and to let the server side (mssql) do the hard work. I wonder how the wire and the browser is going to perform making a pivot from let’s say 50.000 records…

Animal

2 years ago

@Christiaan

Ouch! You’d better only try that on Chrome!

Ivan

2 years ago

I’m with @Christiaan

PivotGrid should have a “remote” option so the number crunching is done in the backend for large datasets, specially since sometimes you might want to give only summarized info to the user and keep the full data set private in the server, with the current implementation you have to give all the dataset to the browser.

Ivan

2 years ago

I just complained but forgot to congratulate the team for the awesome work!!

Congrats! keep up the good work

Ed Spencer

2 years ago

@Ivan a remote option is a definite possibility for a 4.x release. PivotGrid is fairly computation-heavy so mileage will vary between browsers.

Newer browsers have fast JS engines that can do the math quickly but the overhead could be in sending the unprocessed data over the wire. In one of the examples we have 800 rows of data reduced to just 8 cells - this would be a good candidate for remote execution.

Tyson Cadenhead

2 years ago

Very nice additions!  I really like the PivotGrid and the Calendar.  Any chance that a quarterly view might be available soon?

kustafa

2 years ago

that`s great!!

Chris H

2 years ago

Great updates, thanks a lot!

Leonard

2 years ago

Outstanding! Congrats on getting this out. I’ve been looking forward to the pivot grid for a long time and for me it’s a critical component for any real report generation. I think the local data-source restriction is unfortunate for those who need to deal with 100k + records. Hopefully we’ll be seeing a remote version with _some_ type of MDX type querying abilities at some point. Features like baked-in drag-drop for row/column headers and drill-down/drill-up/drill-through would be awesome as well, really taking it ‘to the next level’ allowing us to replace other ‘enterprise’ reporting toolkits.

Jacky

2 years ago

How will the pivot grid deal with aggregating rates/ratios?

Ed Spencer

2 years ago

@dreas great suggestion, this has been added and will feature in the next beta release

@Tyson no immediate plans for a quarterly or yearly view

@Leonard we’re assessing the various ways of transporting calculated data over the wire for PivotGrid - stay tuned

Ed Spencer

2 years ago

@Jacky you can pass a custom aggregation function to the pivot grid and output anything you like. Perhaps you’re referring to calculating all values of all cells and then making the ratio between them available? This isn’t supported yet, but would be great for creating heatmap-like grids

Paolo

2 years ago

I tried the Pivot Grid component from 3.3 beta release but probably there are some problems with the rows heigth.
If you change the grid height, the rows doesn’t change their height.

Christiaan

2 years ago

@Leonard “allowing us to replace other ‘enterprise’ reporting toolkits.”

YES!

Sergio Ramazzina

2 years ago

Very well done!

Alex

2 years ago

Good News

Fabio Barros

2 years ago

Fantastic!! When those new features will be avaliable in Ext GWT?? It´s possible to use a mix of GWT and pure Ext??

Bill Crowell

2 years ago

The ActionColumn finally solves the rowclick vs. rowdblclick problem quickly and elegantly and provides for further expansion of functions called on items in a data grid. It is not dependent upon the OS/Browser click timing. AND we got it just in time to meet an urgent need in my application!

Making the move away from ActiveWidgets was the best thing I’ve done this year!

vinay kurudi

2 years ago

Fantastic changes…. I love these changes. Calendar component is awesome and Action Column also good…

kharulli

2 years ago

calendar… awesome..
gotta try fast…

Marcus Boos

2 years ago

Thank you!
I love Ext and i will use ActionColumn alot because i allready use a simulated ActionColumn nearly in every Ext Project!

LoreZyra

2 years ago

God! I love you guys! I can’t wait to add these to my app!

Kevin

2 years ago

Will PivotGrid allow you to edit the values in the grid? Is there some way to do that?

Ismail

2 years ago

Good News…
thanks

Eric

2 years ago

The calendar really look great.  Good job team!  Is the beta version fully localized?

Fatih

2 years ago

Calender and Pivot Grid is looks like pretty cool. Really great job. Thanks all team

Lobos

2 years ago

“I’ve a client torturing me at the moment to include a calendar component and other that writing one from scratch the only viable alternative was the Feyasoft one. Problem is Feyasoft’s one is way too slow and the code is a mess. Good that this has been solved by people who know what they’re doing. (Sorry about the slight slate Feyasoft – your other stuff is great by btw wink )”

There is also the issue of recurrence - I have not seen any support for recurrence in the calendar and this is a must - I guess a lot of it is done on the server, but there are a few things for the ext layer like spanning days and such.

Anyways great work and I hope recurrence is being thought on.

Christiaan

2 years ago

@Kevin: Edit aggregated data???

Dan

2 years ago

The CalendarPicker needs a little polishing .
When switching between day/week/month views the selected date is not passed to the new view.

Ed Spencer

2 years ago

@Dan we just released 3.3 beta 2 with updated Calendar controls - check it out at http://www.sencha.com/blog/2010/08/12/ext-js-3-3-beta-2-released/

dirsen

2 years ago

I would like to thanks ExtJS team for this great work.

Gajanan

2 years ago

Rally I like calender component and action column.

Thanks a lot.

Gajanan Borde

2 years ago

Keep it up. Thanks

Kevin

2 years ago

@Christiaan: The data in my case won’t actually be aggregated- there will be only one value for each row/column intersection but I need to use PivotGrid’s ability to have multiple row headers and column headers that can be reconfigured on the fly. I haven’t found any other grid type that can do that.

Rodrigo

2 years ago

Pivot Grid are excelent, Do they have plans to incorporate it in GXT?

pepepaco

2 years ago

looks weird in IE6 thats my company official browser…
thanks.

brad

2 years ago

@Ed: Sweet work on the pivot grid, and calendar!

On the pivot grid side, would it be possible to add header/footer to the grid that uses post pivot functions?

For example: Total the pivoted column (at bottom), or total the pivoted row (at right) with a property like title : “Total”

Erick

2 years ago

Good Job.
The Calendar is Awesome.
Thank

Purushotham

2 years ago

Great Job ExtJS Team, ActionColumn, PivotTable features are really cool.
Nice job..
Thanks ,
Puru

Anderson Chaves

2 years ago

The pivot grid can support multiples measures?

Mehul Patel

11 months ago

Will this feature be available on EXTJS 4.0?

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

Commenting is not available in this channel entry.