O'Reilly logo

Learning Ext JS - Fourth Edition by Armando Gonzalez, Crysfel Villa, Carlos A. Méndez

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

We can add events, animation, and custom behavior to 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 previous example, you might have noticed that we have the following code:

{
  type: "image",
  src: "images/apple-touch-icon.png",
  globalAlpha: 0.9,
  x: 205,
  y: 20,
  height: 100,
  width: 100,
  listeners: {
    dblclick: function(){
       Ext.Msg.alert('Logo', 'event dblclick on Sencha logo');
    }
  }
}

So, we can add or attach listeners to our sprite elements and add interaction. Let's create a new example—first, the HTML page:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Draw - 02 - Interactivity</title> <link rel="stylesheet" type="text/css" ...

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