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.
Good. Why this post is not in the blog main page? Thanks!
Wemerson, it’s probably because they give extra value to customers who are subscribed to their newsletter. Sort of like a loyalty bonus.
Correct, AwesomeBob! Look for this post to be public on the blog sometime next week.
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.
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!
“When Designer offers support for 4.0 natively,…”
When will this support be available in the Designer ?
Hey, sbtule must be your middle name. Great post!
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
i just added this.on(‘afterrender’, this.renderChart, this); and i got error.
Please send me your demo.
Thank you
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.
You’re on top of the game. Thanks for srhaing.
queremos probar esta herreamineta
Goood blog уou’vegot һere.. Ӏt’s difficult tο find excelllent writing ⅼike yours these days.
I truly appreciate individuals liҝe y᧐u!
Take care!! Composite ⅼong HDI dai ly composite HDI chinh hang
I just сouldn’t go аway yߋur website prior tо suggesting tһat I аctually loved tһe sttandard info a person supply fοr
your visitors? Is gonna Ƅe again ceaselessly to check սp on neᴡ posts
Composite ⅼong HDI composite long phu cui re nhat