jquery - 将 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');
            }
        }
    });

});