function formacion_pub(){
    
    var centro = viewport.getComponent('center-panel');
	
	if(!centro.findById('detalle-formacion')){
		centro.add({
			id:'detalle-formacion',
			title:'Cursos',
			closable:true,
			autoScroll:true
		}).show();
		centro.activate('detalle-formacion');
		document.getElementById('detalle-formacion').innerHTML = '<div id="formacion-grid" style="width:100%;"></div>';
		
		var myPageSize = Math.round((altura)/60);
		var rowID;
		
		// create the courses grid
		var ds = new Ext.data.Store({
			proxy:new Ext.data.HttpProxy({url:'formacion_pub/cursos.jsp'}),
			reader:new Ext.data.JsonReader({
				root:'results',
				totalProperty:'totalCount'
			},[
				{name:'ID'},
				{name:'NOMBRE'},
				{name:'DESCRIPCION'},
				{name:'CERRADO'},
				{name:'PRECIO_P'},
				{name:'PRECIO_COL'},
				{name:'CUR_ID'},
				{name:'F_INICIO2'},
				{name:'CREDITOS'},
				{name:'F_FIN2'},
				{name:'UBICACION'},
				{name:'HORARIO'},
				{name:'DURACION'},
				{name:'AUTORIDAD_COF'}
			]),
			remoteSort:true
		});
		
		var cm = new Ext.grid.ColumnModel([{
				header:"Titulo",
				dataIndex:'NOMBRE',
				align:'left',
				width:Math.round(0.55*anchura)
			},{
				header:"Fecha de Inicio",
				dataIndex:'F_INICIO2',
				align:'center',
				width:Math.round(0.15*anchura)
			},{
				header:"Fecha de Fin",
				dataIndex:'F_FIN2',
				align:'center',
				width:Math.round(0.15*anchura)
			}
		]);
		
		cm.defaultSortable = false;
		
		var cursoTplMarkup = [
		    '<div class="formacion_detail_div">',
		    '<h1 class="formacion_detail_title"><u>{NOMBRE}</u></h1><br/>',
			'<h2 class="formacion_detail_subtitle">DESDE EL <b>{F_INICIO2}</b>',
			'<tpl if="F_FIN2 != \'\'"> HASTA EL <b>{F_FIN2}</b></tpl>',
			'</h2><br/>',
			'<tpl if="UBICACION != \'\'">En {UBICACION}<br/><br/></tpl>',
			'<tpl if="HORARIO != \'\'"><b>Horario</b>: {HORARIO}<br/></tpl>',
			'<tpl if="CREDITOS != \'\'"><b>Créditos</b>: {CREDITOS}<br/></tpl>',
			'<b>Precio</b>: {PRECIO_P} &euro;<br/>',
			'<b>Precio Colegiado</b>: {PRECIO_COL} &euro;<br/>',
			'<tpl if="DESCRIPCION != \'\'"><br/>{DESCRIPCION}<br/></tpl>',
			'</div>'
		];

		var cursoTpl = new Ext.XTemplate(cursoTplMarkup);
		
		var grid = new Ext.grid.GridPanel({
			title:'Cursos',
			store:ds,
			cm:cm,
			sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
			enableColLock:false,
			width:anchura,
			height:Math.round((altura)/2),
			loadMask:true,
			trackMouseOver:false,
			viewConfig:{forceFit:true},
			split:true,
			region:'north',
			bbar:new Ext.PagingToolbar({
				pageSize:myPageSize,
				store:ds,
				displayInfo:true,
				displayMsg:'Mostrando registros {0} - {1} de {2}',
				emptyMsg:"No hay registros que mostrar"
			})
		});

		renderTopic = function (value, p, record) {
			return String.format("<p style='margin-bottom:10px;'><b><a href='../Descarga?tipo=5&id={0}&id2={1}' target='_blank'>{2}</a></b></p><i>{3}</i>",
					record.data.ID,
					record.data.COA_ID,
					record.data.NOMBRE,
					record.data.DESCRIPCION);
		}

		var cmFiles = new Ext.grid.ColumnModel([{
			header:"Documentación",
			dataIndex:'NOMBRE',
			align:'left',
			width:Math.round(0.30*anchura),
			renderer:renderTopic
		}]);
		
		var dsFiles = new Ext.data.Store({
			proxy:new Ext.data.HttpProxy({url:'formacion_pub/files.jsp'}),
			reader:new Ext.data.JsonReader({
				root:'results',
				totalProperty:'totalCount'
			},[{name:'NOMBRE'},
			   {name:'DESCRIPCION'},
			   {name:'ID'},
			   {name:'COA_ID'}])
		});
		
		var gridFiles = new Ext.grid.GridPanel({
			title:'Ficheros',
			store:dsFiles,
			cm:cmFiles,
			sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
			enableColLock:false,
			width:300,
			height:Math.round((altura)/2),
			loadMask:true,
			trackMouseOver:false,
			viewConfig:{forceFit:true},
			split:true,
			region:'east'
		});
		
		new Ext.Panel({
			renderTo:'formacion-grid',
			frame: true,
			width:anchura,
			height:altura,
			layout:'border',
			items:[grid,{
					id: 'detailPanel',
					region: 'center',
					bodyStyle: {background: '#ffffff',padding: '7px', 'overflow-y':'scroll'},
					html: ''
				},gridFiles
			]
		})

		ds.load({params:{start:0,limit:myPageSize}});
		
		grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
			var detailPanel = Ext.getCmp('detailPanel');
			cursoTpl.overwrite(detailPanel.body, r.data);
			dsFiles.load({params:{edicion:r.data.ID, curso:r.data.CUR_ID}});
		});

    }
    else{
    	centro.activate('detalle-formacion');
    	centro.findById('detalle-formacion').show();
    }
}