Ext JS 4 introduces a brand new drawing package that gives us the opportunity to create complex graphics directly in the browser. The framework itself leverages this package to render all of the new charts.
This recipe will explore how we go about using this new package to draw some simple shapes. Before this, we will explain what classes the package consists of and how they work and fit together:
Ext.draw.Surface
: The surface class provides us with an abstracted interface into the underlying drawing technology, which changes across different browsers depending on what technologies they support. The concrete implementations of the surface class use SVG (Ext.draw.engine.Svg
) in all capable browsers with VML (Ext.draw.engine.Vml
) being used in the remaining incapable ones (namely, Internet Explorer 6, 7, and 8). This abstraction lets us only worry about what we want to draw and leave the responsibility of how to actually draw it to the framework.