Drawing graphics in ExtJs

First off I want to point out that I'm very new to the ExtJs library. I want to create an image through the use of some drawing/canvas API. The image I want to create is similar to the below image.

I'm wondering if this is possible开发者_高级运维 through javascript/Extjs because I haven't been able to find anything online that makes this clear. If you can think of a different kind of approach I would appreciate that as well.

---

I don't know of a canvas API for Ext. But you can easily use the canvas API with Ext. I fiddled it.

Markup:

<canvas id="c1"></canvas>

JavaScript:

Ext.onReady(function() {
    draw(document.getElementById('c1'));
});

function draw(el) {
    var canvas = el;
    var ctx = canvas.getContext("2d");
    ctx.strokeRect(0, 0, 50, 200);
    for(var y = 10; y < 200; y += 10){
        ctx.moveTo(0, y);
        ctx.lineTo(25, y);
    }
    ctx.stroke();
    ctx.closePath();
}

---

As far as I know ExtJS 3.x does not have any API that would facilitate canvas drawing. As Josiah says, you need to stick with plain JavaScript API for that, but you can still use ExtJS to manage your Elements and Components.