Worked on look of the app

www/app/controller/Main.js

@@ -23,7 +23,7 @@ Ext.define('app.controller.Main', {
 
             'listpanel #summary': {
                 itemtap: 'simulation',
-                tap: 'closeoverlay',
+                //tap: 'closeoverlay',
             },
 
             '#ext-button-1': {
@@ -136,7 +136,7 @@ Ext.define('app.controller.Main', {
         });
 
         this.requestInfo(test_id, cb);
-        this.getOverlay().hide().showBy(this.getMapView(), 'br-br');
+        this.getOverlay().showBy(this.getMapView(), 'br-br');
     },
 
     showOverlay: function(list, index, element, record){

www/app/view/Map.js

@@ -5,6 +5,7 @@ Ext.define('app.view.Map', {
 
 	config: {
 		useLoadMask : true,
+
 		mapOptions : {
 			zoom : 12,
 			mapTypeId : google.maps.MapTypeId.ROADMAP,

www/app/view/Simulation.js

@@ -6,14 +6,15 @@ Ext.define('app.view.Simulation', {
         items: 
         [
         {   
-            dock: 'top',
+            docked: 'top',
             xtype: 'toolbar',
-            title: 'Flood Simulation Browser'
+            title: 'Flood Simulation Browser',
         },
         {
             xtype: 'SimulationMap',
             flex: 2,
         }],
+
     }
 });
 

www/app/view/StepsOverlay.js

@@ -15,11 +15,12 @@ Ext.define('app.view.StepsOverlay', {
     		type: 'slideOut',
     		direction:'right',
     	},
-    	dragging: true,
+
+    	//draggable: true,
     	autoDestroy: true,
     	hidden: true,
-	    width: 200,
-	    height: 80,
+	    width: 80,
+	    height: 150,
 	    scroll: false,
 	    items: [
 	    {
@@ -27,36 +28,39 @@ Ext.define('app.view.StepsOverlay', {
 	        id: 'closebutton',
 	        iconCls: 'delete',
 	        iconMask: true,
-	        width: 45,                    
-	        top: -30,
-	        right: 10,
+	        height: 10,                  
+	        top: 0,
+	        right: 0,
 	        border: 'solid',
 	        handler: this.closebutton,
 	        scope: this,
 	    },
 	    {
-	        top: 15,
+	        top: 50,
 	        align: 'center',
 	        items : [
 	        {
 	            xtype: "button",
-	            id: 'backwards',
+	            id: 'forward',
+	            cls: 'overlay-button',
 	            width: 45,
-	            iconCls: 'arrow_left',
+	            iconCls: 'arrow_up',
 	            floating: 'right',
 	            iconMask: true,
-	            left: 10,
 	            align: 'center',
+	            left: 20,
 
 	        },
 	        {
+	        	top: 50,
 	            xtype: "button",
-	            id: 'forward',
+	            id: 'backwards',
+	            cls: 'overlay-button',
 	            width: 45,
 	            floating: 'left',
-	            iconCls: 'arrow_right',
+	            iconCls: 'arrow_down',
+	            left: 20,
 	            align: 'center',
-	            left: 100,
 	            iconMask: true,
 	        }]
 	    }],

www/build/native/My Application.app/webapp/index.html

@@ -78,6 +78,17 @@
             background: white;
         }
 
+        #overlay {
+            border: solid;
+            border-width: 1px;
+            border-color: #a9a9a9;
+        }
+
+        .x-button-icon.down.x-icon-mask {
+            background: url(up.png);
+        }
+
+
     </style>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
     <script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<

www/build/package/index.html

@@ -78,6 +78,17 @@
             background: white;
         }
 
+        #overlay {
+            border: solid;
+            border-width: 1px;
+            border-color: #a9a9a9;
+        }
+
+        .x-button-icon.down.x-icon-mask {
+            background: url(up.png);
+        }
+
+
     </style>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
     <script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<

www/index.html

@@ -78,6 +78,17 @@
             background: white;
         }
 
+        #overlay {
+            border: solid;
+            border-width: 1px;
+            border-color: #a9a9a9;
+        }
+
+        .x-button-icon.down.x-icon-mask {
+            background: url(up.png);
+        }
+
+
     </style>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
     <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

www/resources/sass/app.scss

@@ -4,8 +4,8 @@
 // do not use in order to create a smaller css file.
 @include sencha-panel;
 @include sencha-buttons;
-@include sencha-sheet;
-@include sencha-picker;
+//@include sencha-sheet;
+//@include sencha-picker;
 @include sencha-tabs;
 @include sencha-toolbar;
 @include sencha-toolbar-forms;
@@ -13,7 +13,48 @@
 @include sencha-list;
 @include sencha-layout;
 @include sencha-carousel;
-@include sencha-form;
-@include sencha-msgbox;
+//@include sencha-form;
+//@include sencha-msgbox;
+
 
 // Your custom code goes here...
+#overlay {
+	//@include border-radius(10px);
+// needs latest Compass, add '@import "compass"' to your scss
+background-color: rgb(255,255,255); // Old browsers
+@include filter-gradient(#ffffff, #b2b2b2, vertical); // IE6-9
+@include background-image(linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 65%,rgba(225,225,225,1) 82%,rgba(178,178,178,1) 100%));
+
+}
+
+#forward {
+	// needs latest Compass, add '@import "compass"' to your scss
+background-color: rgb(255,48,25); // Old browsers
+@include filter-gradient(#ff3019, #cf0404, vertical); // IE6-9
+@include background-image(linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%));
+
+}
+
+#backwards {
+	// needs latest Compass, add '@import "compass"' to your scss
+background-color: rgb(255,48,25); // Old browsers
+@include filter-gradient(#ff3019, #cf0404, vertical); // IE6-9
+@include background-image(linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%));
+}
+.x-button-pressed.overlay-button {
+	// needs latest Compass, add '@import "compass"' to your scss
+background-color: rgb(207,4,4); // Old browsers
+@include filter-gradient(#cf0404, #ff3019, vertical); // IE6-9
+@include background-image(linear-gradient(top,  rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%));
+
+}
+.x-button-pressed.overlay-button  {
+	// needs latest Compass, add '@import "compass"' to your scss
+	background-color: rgb(207,4,4); // Old browsers
+	@include filter-gradient(#cf0404, #ff3019, vertical); // IE6-9
+	@include background-image(linear-gradient(top,  rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%));
+}
+
+#closebutton {
+	background: none;
+}