Ввод диаграмм javascript внутри окна extjs

Question

Как бы поместить внешний график javascript, как один из flot или jqplot, в окно extjs? Я знаю, что я могу использовать диаграммы, которые предоставляет extjs, но я хочу вместо этого поместить диаграмму флота или 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 ]); 
      } 
     } 
    }); 
});