An Astronomical Navigator made in Ext-JS 4 and Google Earth

I was curious about experiment with version 4 of Ext-js. I have some time developing in versions 3.X, so I decided to make something related to astronomy, because I have some experience as amateur astronomer.


Click here for view the working app   Download the source code

I realized that Google Earth had a Sky mode, something like a space explorer with a full catalog of deep space objects. So, here the final application, and some features I found interesting, :

First steps: Developing the main screen and sections
I use to separate each section or complex components of our applications in different JavaScript files and simulate namespaces with object variables for handle the code and controls inside all sections in a easiest way.

Instead of make namespaces as usual, (like var ns = { }, then ns.package = { }, etc )I made use of Ext.define method that let us to set our classes and name spaces directly as a string, without the need of declaring variables or the complete namespace structure.

  Ext.define('astronav.objectgrid', { ... 

The first trouble I had in this new way to create and define objects was to figured out where i'll gone to initialize my instances properties : i asked my where i'll gone to initialize my object if i didnt made use of a classic constructor ?

I solved the problem using the method initComponent. The first time I used it, I had so many javascript errors even only for declare this method, until I figured out that I must made a call to this.callParent() inside method.


Statics
I needed to access one control that was in one section of the app inside another ( like when I have to show selected objected in the google earth plugin ) and I don’t like to make a global variable to do that, because it’s kind of messy. Ext-js has a useful feature called statics that mimics the static class members in programming languages like java and .net.

  Ext.define('Najar.Utils', {
    statics : {
        loadingMask: null,
        objects_cache: {}, .... 
But be careful, we have to declare them starting with an uppercase letter or we’ll get some ext-js errors.


The Google Earth - Sky Navigator

This is the part I liked the most, even it wasn’t so easy. I use a php proxy to made external Ajax calls and avoid the issues using client side objects, to made use of a web service of SIMBAD astronomical database for retrieve information about the selected object . I think they must improve the structure of the returned data, but it was fine. I didn’t want to spend all my time capturing the objects coordinates in the hard-coded json.

The good thing was that SIMBAD returns the objects coordinates as degrees. If not, I should have to parse and convert the Right Ascension ( that represents the Long coordinate ) and Declination ( that represents that Lat ) coordinates, often expressed in hours and minutes of arc.

According this formula, we must subtract 180 º to get the correct value of the RA in the Google Earth plug-in.

One last annoying issue i had was when I putted the About menu in the toolbar of the astronomical navigator . It doesn’t showed in IE and Chrome until I set the Ext.useShims = true. This is due to problems for showing html objects like divs over plugins like flahs. So, the work around is to put the div element over an iframe element. This technique is commonly called iframe shims.