Question

如何在extjs窗口中放置外部javascript图表，例如flot或jqplot中的图表？我知道我可以使用extjs提供的图表，但我想在窗口内放置一个flot或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 ]);
            }
        }
    });
});

将javascript图表放在extjs窗口中

1 个答案: