Sencha Inc. | HTML5 Apps

Blog

Integrating Ext JS 4 Charts with Ext Designer

May 16, 2011 | Jarred Nicholls

Integrating Ext JS 4 Charts with Ext Designer In the recent months leading up to the Ext JS 4 Preview and Beta releases, we have all been exposed to the mouth watering features that 4.0 brings to the developer tool belt. Improved packages such as the Grid, Form, and Data, as well as brand new packages like Charts and Ext.draw, make Ext JS 4 the most comprehensive and most powerful JavaScript application framework the world has ever seen. Understandably, many cannot wait to dive head first into the framework and start using it for their own projects.

While architecting Ext JS 4, we made sure that it would be as smooth, seamless, and pain-free as possible to adapt it for use in existing Ext JS 3.x applications. By supporting Sandboxing and providing a Compatibility Layer, using Ext JS 4 packages and components in an existing Ext JS 3.x application is not only possible, it’s encouraged!

For Ext Designer users, Ext JS 4 support is coming in a release soon after Ext JS 4. But in the meantime, let not thy heart be discouraged! Using the Sandboxing feature, we can integrate Ext JS 4 components into our 3.x applications. While the Designer can’t (yet) natively configure these new components, you can setup your project to "make space" for the components, and include them programmatically. When Designer offers support for 4.0 natively, you can upgrade your project and put the real component in its rightful place.

Since I personally love the new Charts package, let’s experiment adding a pie chart to an existing project. Here’s what I have right now:

An existing project in Ext Designer, a drag and drop UI builder for Ext JS apps

I have a BoxComponent named PieChartContainer that is a linked instance into my "Tickets By Priority" FieldSet. I want to place my pie chart right into this container. I’ll start by exporting the project to get my working files. Since the PieChartContainer was promoted to a class, it is exported as its own JS files; this will make adding my pie chart very straightforward, while also maintaining clean separation from the bulk of the application that lives in the ControlPanel class.

Now, the first thing I want to set up is the sandboxed Ext JS 4. Luckily, this is as simple as including the necessary CSS and JS files. The sandboxed version of Ext JS 4 will live in its own namespace, Ext4, and will have all of its CSS styles scoped accordingly. These files can be found in the Ext JS SDK.

<!-- Ext JS 4 Includes -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-sandbox.css"/>
<script type="text/javascript" src="ext4/builds/ext-all-sandbox.js"></script>

Now, I can add the pie chart into the PieChartContainer class by editing the PieChartContainer.js implementation file. Unfortunately, mixing Ext JS 4 components with Ext JS 3.x containers is simply not possible. Instead, I can render the chart into the PieChartContainer’s underlying DOM node. To do this, I need to add a listener for PieChartContainer’s afterrender event in the initComponent() function:

initComponent: function() {
    PieChartContainer.superclass.initComponent.call(this);
    this.on('afterrender', this.renderChart, this);
}

By waiting until after the PieChartContainer has rendered, I can rest assured that I have a DOM node available to render my chart in. At this point, I’m ready to create my chart!

renderChart: function() {
    Ext4.createWidget('chart', Ext.apply(this.getChartCfg(), {
        renderTo: this.getEl().dom
    }));
}

Here, notice that I grab the Ext.Element of my PieChartContainer, and pass its dom to my chart configuration. This is a very important step because the Ext.Element in Ext JS 3.x is not compatible with Ext JS 4’s Ext.core.Element class. Passing getEl() alone would not suffice and results in a runtime error. The rest of the chart configuration details are hidden away in getChartCfg(). And here is the beautiful result:

Pure JavaScript charts: an Ext JS 4 chart inside an Ext JS panel.

If you’re anxious and daring enough to get started with Ext JS 4 while continuing to build and maintain your Designer project, this simple tactic can be used. When Designer extends first-class citizenship to Ext JS 4, your project can be updated and/or will continue to run seamlessly.

There are 11 responses. Add yours.

Wemerson

4 years ago

Good. Why this post is not in the blog main page? Thanks!

AwesomeBob

4 years ago

Wemerson, it’s probably because they give extra value to customers who are subscribed to their newsletter. Sort of like a loyalty bonus.

Jay Robinson Sencha Employee

4 years ago

Correct, AwesomeBob! Look for this post to be public on the blog sometime next week.

Henry

4 years ago

I’m very impressed that Extjs 4 has this “sandboxing” functionality.  Very smart move and very exciting!  Can’t wait to add some sexy charting to my 3.x app.

AwesomeBob

4 years ago

You guys are pre-IPO correct? I WANT SHARES! This company has such a bright future ahead of it. I would love to ride along!

Cody

4 years ago

“When Designer offers support for 4.0 natively,...”

When will this support be available in the Designer ?

Jailene

4 years ago

Hey, sbtule must be your middle name. Great post!

abdelaat

4 years ago

It’s cool, but i have tried the same thing and i didn’t success to get the result, could you please send me an example that works fine ?

Thank you in advance

tvquynh

4 years ago

i just added this.on(‘afterrender’, this.renderChart, this); and i got error.
Please send me your demo.
Thank you

Yang Gui

3 years ago

Hi guys, I meet one error when I followed this tutorial.

Uncaught TypeError: Cannot read property ‘theme’ of undefined   ext-all-sandbox.js:15

What suggest do you have?

Thanks.

Jodi

3 years ago

You’re on top of the game. Thanks for srhaing.

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

Commenting is not available in this channel entry.