extjs 창 안에 자바 스크립트 차트 넣기

Question

flot 또는 jqplot에서와 같은 외부 자바 스크립트 차트를 어떻게 extjs 창에 넣을 수 있습니까? extjs가 제공하는 차트를 사용할 수는 있지만 대신 창 안쪽에 flot 또는 jqplot 차트를 넣고 싶습니다.

Answer 1

그냥 크리스가 말했듯이 (왜 대답으로 게시하지 않았습니까?).

여기에 완벽한 예입니다 :

Live on jsFiddle (이하 "외부 자원"탭을 확인하십시오; FLOT 코드는 기본적인 예에서)입니다.

Ext.onReady(function() { 
    Ext.widget('window', { 
     autoShow: true 
     ,shadow: false 
     ,title: "Flot in ExtJS" 
     ,resizable: true 
     ,margin: 10 
     ,width: 600 
     ,height: 350 

     ,html: '<div class="demo-container">' 
      + '<div id="placeholder" class="demo-placeholder"></div>' 
      + '</div>' 

     ,listeners: { 
      resize: function(panel) { 
       panel.body.down('.demo-container').setSize(panel.body.getSize()); 
      } 
      ,afterrender: function(panel) { 
       var el = this.body; 
       el.down('.demo-container').setSize(el.getSize()); 

       var d1 = []; 
       for (var i = 0; i < 14; i += 0.5) { 
        d1.push([i, Math.sin(i)]); 
       } 
       var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
       var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; 

       $.plot("#placeholder", [ d1, d2, d3 ]); 
      } 
     } 
    }); 
});