Question

当我使用jqplot时，它神奇地将绘图注入指定的div chart1：

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

对于将创建的代码注入'info'div的ExtJs也是如此：

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为null（此时！？）：

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

});

将jqPlot嵌入到ExtJs面板中

1 个答案: