O'Reilly logo

Learning Ext JS 4 by Armando Gonzalez, Crysfel Villa

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

Adding interaction

The Ext.draw.Sprite class is a very versatile class. We can add events, animation, and add custom behavior to the sprites. The main feature of this class is that we aren't tied to a specific shape or structure, and it is browser and device agnostic.

In the following example we are going to code a bouncing ball, using the Ext.Draw.Sprite class power:

/**
 * @class MyApp.view.BouncingBall
 * @extends Ext.draw.Component
 * @author Armando Gonzalez <iam@armando.mx>
 * This is the bouncing ball component
 */
Ext.define('MyApp.view.BouncingBall', {
  extend    : 'Ext.draw.Component',
    alias  : 'widget.bouncingball',
style:{
  backgroundImage:"url('resources/images/court.jpeg')"
},
    width: 700,
    height: 350,
    ballSize :30, afterRender : function(){ ...

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