O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drawing paths

As well as simple geometric shapes the Ext.draw package allows us to create any shape we can think of using the 'path' sprite type. This type of sprite lets us use an SVG-like syntax to define the points that the path will pass through.

We will first explore how to create simple straight-line shapes and then move on to create more complex curved paths.

How to do it...

In our example we will draw a simple house with a sky and some grass that a 3-year-old would be embarrassed to call his own:

  1. We start by creating an Ext.draw.Component to contain our sprites:
    var house = Ext.create('Ext.draw.Component', {
        renderTo: Ext.getBody(),
        width: 800,
        height: 550,
        viewBox: false,
        items: []
    });
  2. Next we add two rectangles, one blue and one green, to ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required