On the Code Again…

On the code again –
Just can’t wait to get on the code again.
The life I love is making web apps with my friends
And I can’t wait to get on the code again.

On the code again –
Coding solutions that have never been.
Fixing bugs I hope to never see again
And I can’t wait to get on the code again.

On the code again –
Finishing a demo app for my salesmen
Hoping they say the things that are worth sayin
And I just can’t wait to get on the code again

On the code again –
Some don’t get that I’m a true craftsman
Only a perfect app will ever bring me zen
And I just can’t wait to get on that code again

Ext JS 4 Draw Package – Asteroids Part 1

Why you need to pay attention in geometry class:

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
});