Skip to main content

Ext JS 4 Draw Package – Asteroids

Ext.Draw Example 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
Ext.define('MyApp.view.Asteroids', {
 requires: ['Ext.draw.*']
 extend: 'Ext.window.Window',
 alias: 'widget.asteroids',
 rotation: 0,
 posX: 0,
 posY: 0,
 drawComponent: Ext.create('Ext.draw.Component', {
  id: 'space',
  width: 300,
  height: 300,
  viewBox: false,
  gradients: [{
   id: 'g1',
   angle: 0,
   stops: {
     0: { color: '#fff'},
    20: { color: '#fff'},
   100: { color: '#fff' }
  }
}],
listeners: {
 'click': function(e, el, obj){
   var myObj = Ext.get(e.getTarget('path'));
   console.log("You clicked on " + myObj.id);
   e.stopPropagation();
 },
 element: 'el'
 },
items: [{
 type: 'path',
 stroke: 'green',
 path: 'M50 50 L40 80 L60 80 Z',
 id: 'ship',
 fill: 'url(#g1)'
}, {
 type: 'text',
 x: 25,
 y: 20,
 font: '20px Arial',
 text: 'Use your cursor keys to move the ship'
 }]
}),
moveShip: function(){
 var rad = ((this.rotation - 90) * Math.PI) / 180;
 var dx = 1 * Math.cos(rad);
 var dy = 1 * Math.sin(rad);
 var sprite = Ext.getCmp('space').surface.items.first();
 this.posX += dx;
 this.posY += dy;
 sprite.setAttributes({
  translate: {
    x: this.posX,
    y: this.posY
  }
 }, true);
Ext.Function.defer(this.moveShip, 5, this);
},
initComponent: function(){
  Ext.apply(this, {
   layout: 'fit',
   width: 400,
   height: 300,
   items: [this.drawComponent]
  });
  this.callParent(arguments);
  var nav = new Ext.util.KeyNav(Ext.getDoc(), {
    left: function(){
     var sprite = Ext.getCmp('space').surface.items.first();
     this.rotation -= 5;
     if (this.rotation < 0)
       this.rotation = 355;
     sprite.setAttributes({
      rotation: {
       degrees: this.rotation
      }
     }, true);
  },
  right: function(){
   var sprite = Ext.getCmp('space').surface.items.first();
   this.rotation += 5;
   if (this.rotation == 365)
    this.rotation = 0;
   sprite.setAttributes({
     rotation: {
      degrees: this.rotation
     }
    }, true);
  },
 up: function(){
   Ext.Function.defer(this.moveShip, 5, this);
 },
 scope: this
});
} // initComponent
});

Comments

Post a Comment

Popular posts from this blog

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( &
Post a Comment
Read more

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to
8 comments
Read more

EXTJS - Way to get a reference to the viewport from any controller

An easy way to get a reference to the viewport from any controller Here's an easy way to get a reference to your viewport from any controller: Ext.application({ launch: function(){ this.viewport = Ext.ComponentQuery.query('viewport')[0]; this.centerRegion = this.viewport.down('[region=center]'); } }); then, inside say, a controller, you can call this: this.application.viewport to get a reference to the viewport.
4 comments
Read more