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" href="../ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script src="../ext-5.1.1/build/ext-all.js"></script> <script...