APP SDK 2.0 : 단기간에 차트?

Question

두 SDK가 곧 2.0 SDK에서 사용할 수있는 정말 멋진 차트 작성 도구를 만들 것입니다.하지만 그때까지 Google 차트를 사용하고 싶습니다.

1.x API에서 id로 html 객체를 정의한 다음 getElementById()를 사용하여 해당 항목에 대한 참조를 얻을 수 있습니다. 그래서 예를 들면 :

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

그러나 새로운 SDK의

, 당신은 어떻게 다음을 수행 할 Sky News에 일할 수있는 HTML 블록을 가지고 있지 않은거야? 이 질문은 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 :"Ext.define.Rally.loadScripts "에서 시작된"Ext.define.initComponent "내부에서 null의"parentNode '속성을 읽을 수 없습니다.

나는 또한 구글 API 참조하도록 레이크 스크립트에 다음 행을 추가했습니다 : 절대로 _drawChart()에 도달하지

<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에서 확인할 수 있습니다.