APP SDK 2.0: Графики в краткосрочной перспективе?

Question

Я знаю, что вы, ребята, создадите действительно хороший инструмент для создания диаграмм, доступный для 2.0 SDK, но до тех пор я хотел бы использовать Google Charts.

В API 1.x вы можете определить объект html по id, а затем использовать getElementById(), чтобы получить ссылку на этот элемент. Так, например:

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

Но в новом SDK, вы не имеете HTML блок работать with-- как бы вы сделать следующее? Этот вопрос относится к любому элементу, где вы хотите привязать объект к месту в своем html.

Answer 1

В новом API app base class является просто расширением Ext.container.Container, который сам является расширением AbstractComponent и поэтому имеет метод getEl(). (Обратите внимание, что, добавляя контент непосредственно к dom-узлам, вы теряете функциональность автоматического макета, предоставляемую Ext-контейнерами).

Вот простой пример, чтобы проиллюстрировать делать что-то вроде этого, хотя:

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

Answer 2

Вот код. Он вылетает с «Uncaught TypeError: невозможно прочитать свойство parentNode« null »внутри« Ext.define.initComponent », инициированное с помощью« Ext.define.Rally.loadScripts ». Никогда не доберется до _drawChart():

Я также добавил следующую строку в скрипт граблями, чтобы ссылаться на Google API:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

А вот App.js:

Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    componentCls: 'app', 

    launch: function() { 
     //Write app code here 
     google.load("visualization", "1.0", {packages:["corechart"]}); 
     google.setOnLoadCallback(this._drawChart); 
    }, 

    _drawChart: function() { 
     var chartContainer = this.down('#chartContainer').getEl().dom; 
     var chart = new google.visualization.BarChart(chartContainer); 

     var graphArray = [['Module', 'Payload Code', 'Test Code']]; 

     chartData = google.visualization.arrayToDataTable(graphArray); 

     chart.draw(chartData, {width: 700, height: 500}); 
    } 
}); 

Answer 3

В последний ответ (фрагмент кода), вам просто не хватает дочернего элемента приложения, которое создает элемент chartContainer, в который вы хотите отобразить диаграмму. Я думаю, что этот код должен сработать для вас:

Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    componentCls: 'app', 
    items: [ 
     { 
      xtype: 'container', 
      itemId: 'chartContainer' 
     } 
    ], 

    launch: function() { 
     //Write app code here 
     google.load("visualization", "1.0", {packages:["corechart"]}); 
     google.setOnLoadCallback(this._drawChart); 
    }, 

    _drawChart: function() { 
     var chartContainer = this.down('#chartContainer').getEl().dom; 
     var chart = new google.visualization.BarChart(chartContainer); 

     var graphArray = [['Module', 'Payload Code', 'Test Code']]; 

     chartData = google.visualization.arrayToDataTable(graphArray); 

     chart.draw(chartData, {width: 700, height: 500}); 
    } 
}); 

Answer 4

Первый черновик компонента для составления карт SDK 2.0 теперь работает.

Вы можете узнать об этом here.