APP SDK 2.0:短期内的图表? [英] APP SDK 2.0: Charts in the short term?

问题描述

我知道你们很快就会为 2.0 SDK 制作一个非常好的图表工具，但在那之前，我想使用 Google Charts.

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.

在 1.x API 中，您可以通过 id 定义 html 对象，然后使用 getElementById() 获取对该项目的引用.例如:

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'));

但是在新的 SDK 中，您没有可使用的 HTML 块——您将如何执行以下操作?此问题与您想要将对象固定到 html 中某个位置的任何项目相关.

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.

推荐答案

在新的 API 中 app 基类 只是 Ext.container.Container 的扩展，它本身是 AbstractComponent 的扩展，因此具有 getEl() 方法.(请注意，通过将内容直接添加到 dom 节点，您会失去 Ext 容器提供的自动布局功能).

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);
    }
});

这篇关于APP SDK 2.0:短期内的图表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！