Question

I know you guys will be making a really nice charting tool available for 2.0 SDK soon, but until then, I’d like to use Google Charts.

In the 1.x API, you could could define html object by id, and then use getElementById() to get a reference to that item. So for example:

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

But in the new SDK, you don’t have an HTML block to work with– how would you do the following? This question is relevant for any item where you want to pin an object to a place in your html.

Answer 1

In the new API the app base class is simply an extension of Ext.container.Container which itself is an extension of AbstractComponent and so has the getEl() method. (Note that by adding content directly to dom nodes you lose out on the automatic layout functionality provided by Ext containers).

Here’s a quick example to illustrate doing something like this though:

Ext.define('My.App', {
    extend: 'Rally.app.App',
    items: [
        {
            xtype: 'container',
            itemId: 'chartContainer'
        }
    ],
    launch: function() {
        var chartContainer = this.down('#chartContainer').getEl().dom;
        var chart = new google.visualization.BarChart(chartContainer);
    }
});