嵌入jqPlot進入ExtJS的面板

Question

當我使用jqplot奇蹟般地注入情節到指定的div chart1：

var chart1 = $.jqplot('chart1', weeks , {... 

同樣是ExtJS的真正的中注入所創建的代碼到「信息」 DIV：

var testPanel = new Ext.Panel({ 
    title: "Test", 
}); 
testPanel.render('info'); 

但是我怎樣才能將chart1繪製到面板中？以下HTML不起作用：

<div id="info">    
    <div id="chart1" class="plot" style="width:400px;height:260px;"></div> 
</div> 

而且把HTML到ExtJS的不起作用，因爲chart1的HTML爲空（在這一點上！？）：

var testPanel = new Ext.Panel({ 
    title: "Test", 
    html: $('chart1').html() 
}); 
testPanel.render('info'); 

Answer 1

您必須設置面板實例上的監聽器來監聽render事件，然後將您的圖表繪製到面板的主體上。

http://jsfiddle.net/chrisramakers/ZXDru/

Ext.onReady(function(){ 

    new Ext.Panel({ 
     renderTo: Ext.getBody(), 
     frame: true, 
     title: 'Test panel', 
     height: 250, 
     listeners: { 
      render: function(){ 

       // this.body.dom is the raw dom object of the body element of this panel 
       // render your plot to this.body.dom 
       console.log(this.body.dom) 
       this.body.update('This is the new content'); 
      } 
     } 
    }); 

});