Ext.onReady(function() {
	// OL MAP
	var optionsStyle;
	getMap();
	// GeoExt Component Grid feature
	var arrayFeature = getData();

	new Ext.Viewport({	 		
		 id:'border-panel'
		 ,layout:'border'
		 ,bodyBorder: false
		 ,listeners : {
		 	afterlayout: function(){
				Ext.get('loading').hide();
		  }}
		 ,defaults: {
			collapsible: true
			,animFloat: false
			,split: true
			,autoHide: false
		 	,useSplitTips: true
			,collapsibleSplitTip:"tirer pour modifier la taille, ou double clicker pour fermer"
			,splitTip: "tirer pour modifier la taille"
			,bodyStyle: 'padding:0px'
		 },
		 items: [{
				region: 'north'
				,height: 40
				,cmargins: '0 0 0 0'
				,contentEl: 'header'
				,hideBorders: true
				,split : false
			 },{
				region: "center"
                ,id: "mappanel"
                ,title: "Map"
                ,xtype: "gx_mappanel"
                ,map: map
                ,layers: [layer]
                ,split: false
                ,collapsible: false
                ,bodyStyle: 'background-color:#7391AD'// Same color of the Base Map
            	,items: [{
                    xtype: "gx_zoomslider",
                    vertical: true,
                    height: 100,
                    x: 10,
                    y: 20,
                    plugins: new GeoExt.ZoomSliderTip({template: "<div>Zoom Level: {zoom}</div>"}) 
                }]	       				
			},{
				title: 'Catastrophes naturelles en 2004'
				,region:'west'			
				,margins: '0 0 0 0'
				,border: true
				,width :300	
				,collapsible: true
				,layout : 'fit'
				,items:	arrayFeature
			},{
				region: 'south'
				,height: 20					
				,margins: '0 0 0 0'
				,html: ''			
				,collapsible: true
				,split : false	
				,contentEl: 'south'	 			  					   
		 }] // End of Items 				
	});	//End of obj ViewPort
    map.zoomTo(2);
}); //End of onReady Function()