Putting javascript charts inside an extjs window

Question

How would I put an external javascript chart, like one from flot or jqplot, inside an extjs window? I know that I could use the charts that extjs provides, but i want to put a flot or jqplot chart inside the window instead.

Answer 1

Just do as Chris said (why didn't you post it as an answer, dude?).

Here's a complete example:

Live on jsFiddle (be sure to check the "External Resource" tab; Flot code is from their basic example).

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