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:

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.

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:

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.