extjs - 将 javascript 图表放在 extjs 窗口中

Question

我如何将外部 javascript 图表（例如来自 flot 或 jqplot 的图表）放在 extjs 窗口中？我知道我可以使用 extjs 提供的图表，但我想在窗口内放置一个 flot 或 jqplot 图表。

Answer 1

就像克里斯说的那样做（你为什么不把它作为答案发布，伙计？）。

这是一个完整的例子：

住在 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 ]);
            }
        }
    });
});