First commit

www/.senchasdk

+sdk

www/app.js

+//<debug>
+Ext.Loader.setPath({
+    'Ext': 'sdk/src'
+});
+//</debug>
+
+Ext.application({
+    controllers: ["Main"],
+    models: ["SimulationModel"],
+    stores: ['SimulationStore'],
+
+    name: 'app',
+
+    requires: [
+        'Ext.MessageBox'
+    ],
+
+    views: ['Main', "Home", "Simulation", "List", 'Map'],
+
+    icon: {
+        57: 'resources/icons/Icon.png',
+        72: 'resources/icons/Icon~ipad.png',
+        114: 'resources/icons/Icon@2x.png',
+        144: 'resources/icons/Icon~ipad@2x.png'
+    },
+    
+    phoneStartupScreen: 'resources/loading/Homescreen.jpg',
+    tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
+
+    launch: function() {
+        // Destroy the #appLoadingIndicator element
+        Ext.fly('appLoadingIndicator').destroy();
+
+        // Initialize the main view
+        Ext.Viewport.add(Ext.create('app.view.Main'));
+    },
+
+    onUpdated: function() {
+        Ext.Msg.confirm(
+            "Application Update",
+            "This application has just successfully been updated to the latest version. Reload now?",
+            function() {
+                window.location.reload();
+            }
+        );
+    }
+});

www/app.json

+{
+    /**
+     * The application's namespace, used by Sencha Command to generate classes
+     */
+    "name": "app",
+
+    /**
+     * List of all JavaScript assets in the right execution order.
+     * Each item is an object with the following format:
+     *      {
+     *          "path": "path/to/script.js" // Relative path to this app.json file
+     *          "update": "delta"           // (Optional)
+     *                                      //  - If not specified, this file will only be loaded once, and
+     *                                      //    cached inside localStorage until this value is changed.
+     *                                      //  - "delta" to enable over-the-air delta update for this file
+     *                                      //  - "full" means full update will be made when this file changes
+     *
+     *      }
+     */
+    "js": [
+        {
+            "path": "sdk/sencha-touch.js"
+        },
+        {
+            "path": "app.js",
+            "update": "delta"
+        }
+    ],
+
+    /**
+     * List of all CSS assets in the right inclusion order.
+     * Each item is an object with the following format:
+     *      {
+     *          "path": "path/to/item.css" // Relative path to this app.json file
+     *          "update": "delta"          // (Optional)
+     *                                     //  - If not specified, this file will only be loaded once, and
+     *                                     //    cached inside localStorage until this value is changed to either one below
+     *                                     //  - "delta" to enable over-the-air delta update for this file
+     *                                     //  - "full" means full update will be made when this file changes
+     *
+     *      }
+     */
+    "css": [
+        {
+            "path": "resources/css/app.css",
+            "update": "delta"
+        }
+    ],
+
+    /**
+     * Used to automatically generate cache.manifest (HTML 5 application cache manifest) file when you build
+     */
+    "appCache": {
+        /**
+         * List of items in the CACHE MANIFEST section
+         */
+        "cache": [
+            "index.html"
+        ],
+        /**
+         * List of items in the NETWORK section
+         */
+        "network": [
+            "*"
+        ],
+        /**
+         * List of items in the FALLBACK section
+         */
+        "fallback": []
+    },
+
+    /**
+     * Extra resources to be copied along when build
+     */
+    "extras": [
+        "resources/images",
+        "resources/icons",
+        "resources/loading"
+    ],
+
+    /**
+     * Directory path to store all previous production builds. Note that the content generated inside this directory
+     * must be kept intact for proper generation of delta between updates
+     */
+    "archivePath": "archive",
+
+    /**
+     * Default paths to build this application to for each environment
+     */
+    "buildPaths": {
+        "testing": "build/testing",
+        "production": "build/production",
+        "package": "build/package",
+        "native": "build/native"
+    },
+
+    /**
+     * Build options
+     */
+    "buildOptions": {
+        "product": "touch",
+        "minVersion": 3,
+        "debug": false,
+        "logger": "no"
+    },
+
+    /**
+     * Uniquely generated id for this application, used as prefix for localStorage keys.
+     * Normally you should never change this value.
+     */
+    "id": "b67f2b40-7fd3-11e1-bda5-b5b6c868e529"
+}

www/app/controller/Main.js

+Ext.define('app.controller.Main', {
+    extend: 'Ext.app.Controller',
+
+    
+    config: {
+        refs: {
+            map: '#mapa',
+            mapView: 'SimulationMap',
+        },
+        control: {
+            'listpanel list': {
+                itemtap: 'showOverlay',
+            },
+
+            '#mapa': {
+                maprender: 'overlay'
+            }
+        }
+    },
+
+    overlay: function(extmap, map){
+        console.log("allo");
+        this.globalMap = map;
+        var pos = new google.maps.LatLng(52.3700,4.89000);
+        console.log(map);
+        new google.maps.Marker({
+            position: pos,
+            icon: 'Google_Maps_Marker.png',
+            map: map,
+            title: 'YOO'
+        });
+    },
+
+    showOverlay: function(list, index, element, record) {
+
+        var bounds = record.get('visbounds');
+        var center = record.get('center');
+        var corners = record.get('corners');
+
+
+        var imageBounds = new google.maps.LatLngBounds(
+            new google.maps.LatLng(bounds[2],bounds[3]),
+            new google.maps.LatLng(bounds[0],bounds[1]));
+        
+        var cornerBounds = [
+            new google.maps.LatLng(corners[0][0],corners[0][1]),
+            new google.maps.LatLng(corners[1][0],corners[1][1]),
+            new google.maps.LatLng(corners[2][0],corners[2][1]),
+            new google.maps.LatLng(corners[3][0],corners[3][1])
+        ];
+
+        new google.maps.GroundOverlay('floodmap1.jpg', imageBounds, {map: this.globalMap});
+
+        var rectangle = new google.maps.Polygon({
+                        paths: cornerBounds,
+                        strokeColor: "#FF0000",
+                        strokeOpacity: 0.8,
+                        strokeWeight: 2,
+                        fillColor: "#FF0000",
+                        fillOpacity: 0.35
+                    });
+
+        rectangle.setMap(this.globalMap);
+        this.getMap().setMapCenter(
+            {latitude: center[0], longitude: center[1]}
+        );
+
+        this.getMap().setMapOptions({
+                zoom: 12,
+        });
+                
+    },
+});
\ No newline at end of file

www/app/model/SimulationModel.js

+Ext.define('app.model.SimulationModel', {
+	extend: 'Ext.data.Model',
+	
+	config: {
+		fields: ['name', 'corners', 'visbounds', 'area_id', 'center'],
+	},
+});
\ No newline at end of file

www/app/store/SimulationStore.js

+var simstore = Ext.define('app.store.SimulationStore', {
+	extend: 'Ext.data.Store',
+	requires: ['Ext.data.proxy.Rest'],
+	id: 'simulationList',
+
+	config: {
+		autoLoad: true,
+		model: "app.model.SimulationModel",
+		proxy: {
+			type: 'rest',
+			url: 'http://sangkil.science.uva.nl:8003/area/list.json',
+			reader: {
+				type: 'json',
+				rootProperty: 'areas'
+			},
+		}
+	}
+});
+

www/app/view/Home.js

+Ext.define('app.view.Home', {
+	extend: "Ext.tab.Panel",
+	xtype: 'homepanel',
+
+	config: {
+		title: 'Home',	
+		iconCls: 'home',
+		styleHtmlContent: true,
+		scrollable: true,
+		html: [	
+			'<h1>Home Page</h1>',
+			'<p>This the home page<p>',
+		].join('')
+	}
+});
\ No newline at end of file

www/app/view/List.js

+/*
+ * Side panel, listing all the simulations available on 
+ * http://sangkil.science.uva.nl:8003/area/list.json
+ */
+Ext.define("app.view.List", 
+{
+	extend: "Ext.Container",
+	xtype: 'listpanel',
+
+	requires: [
+		'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
+	],
+
+	stores: ['SimulationStore'],
+
+	config: {
+		layout: "vbox",
+		items: [
+			{
+				dock: 'top',
+				xtype: "toolbar",
+
+				items: [
+					{
+						text: "Button",
+						ui: "Square",
+						margin: 10
+					}
+				]
+			},
+			{
+				xtype: 'list',
+				itemTpl: '<div>{name}</div>',
+				store: 'SimulationStore',
+				flex: 1
+			}
+		],
+	},
+});
\ No newline at end of file

www/app/view/Main.js

+Ext.define("app.view.Main", {
+    extend: 'Ext.Container',
+    requires: ['Ext.TitleBar'],
+
+    config: {
+        title: "Simulation Browser",
+        layout: "hbox",
+
+        fullscreen: true,
+                layout: "hbox",
+                
+                items: [
+                {
+                    xtype: 'listpanel',
+                    flex: 1
+                },
+               {       
+                    xtype: 'simulationpanel',
+                    flex: 2
+                },
+
+                ]
+
+    }
+});
\ No newline at end of file

www/app/view/Map.js

+Ext.define('app.view.Map', {
+	extend: "Ext.Map",
+	xtype: 'SimulationMap',
+	id: 'mapa',
+
+	config: {
+		mapOptions : {
+			zoom : 10,
+			mapTypeId : google.maps.MapTypeId.ROADMAP,
+			navigationControl: true,
+			navigationControlOptions: {
+				style: google.maps.NavigationControlStyle.DEFAULT
+			}
+		}
+	},
+
+	example: function() {
+		console.log("example function");
+	}
+});
\ No newline at end of file

www/app/view/Simulation.js

+Ext.define('app.view.Simulation', {
+    extend: 'Ext.Container',
+    xtype: 'simulationpanel',
+
+    config: {
+        title: "Map",
+        layout: "vbox",
+        items: [
+            {
+                dock: "top",
+                xtype: 'toolbar',
+
+                items : [
+                    {
+                        text: "button",
+                        ui: "square"
+                    }   
+                ],
+            },
+            {
+                xtype: 'SimulationMap',      
+                flex: 2,
+            }
+        ],
+    },
+});
+