Foro

Ayuda en layout

Ola quiero pedir respetuosamente su ayuda en este tema estoy realizando un layout donde intento ponerlo en un proyecto que estoy realizando, soy nuevo y pues quiero aprender. Mi duda es prácticamente como puedo hacer que el formulario que tengo ingresado se envie y se guarde en mi base de datos y la grid carge los datos de la tabal de mi base de datos. abjunto mi proyecto como va hasta el momento. pero pues no como llamar la base de datos para la grip ni como insertar los datos ayudenme porfa, solo quiero ver un ejemplo sencillo con una base de datos con una tabla cualquiera pero que exista conexion con lo que llevo hasta hora en mi proyecto que es solo la parte grafica.

Usuario no registrado
14/09/2010

4 Respuestas

Mejores votos Por fecha Solución

Hola, Achury, si usas firefox, puedes instalar el addon [url=https://addons.mozilla.org/en-US/firefox/addon/1843/]firebug[/url] y te ayuda mucho con lo errores, tal vez, la ruta donde está el extjs no es la correcta, por otro lado, aqui te paso un link de un curso, algunos tienes videos, y puedes descargar el código fuente para que veas cómo está hecho, eso ayuda muchote. http://www.quizzpot.com/2009/01/ext-js-framework/ Saludos

Invitado
19/09/2010

tokkaido muchas gracias por tu información he estado intentando y realizando el ejemplo, me gustaría si me puedes adjuntar los archivos funcionales para poder ejecutarlos y estudiarlos mas a fondo, siguiendo tus recomendaciones. espero no molestarte demasiado. gracias

Invitado
18/09/2010

pues he estado intentando pero pues como todo novato en esto es dificil, jeje estoy realizando el ejemplo que pusiste pero pues no me muestra el formulario en js. no se si estoy realizando algo mal no se porq no me muestra el formulario ? necesito ayuda ..

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      
        <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/style.css" />
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript">
   var form = new Ext.FormPanel({
   labelWidth : 70,
   url : 'pagina.php',//1
        defaults : {
                xtype : 'textfield'//2
        },
   items : [
           {
                 fieldLabel : 'nombre',
                 id : 'nombre' //3
            }, {
                 fieldLabel : 'apellido',
                 id : 'apellido'
            }],
   fbar : [{//4
      xtype : 'button', iconCls: 'guardar', tooltip: 'Guardar los datos',
      handler : function(){
         form.getForm().submit({
            method : 'POST',
            params : {operacion : 'agregar'},//5
            waitTitle : 'Conectando',
            waitMsg : 'Enviando datos...',
            success : function(){//6
                    win.close();
                    var store = Ext.getCmp('grilla').getStore();
                    store.reload();
                  },
             failure : function(form, action){//7
                 if (action.failureType == 'server'){
                  respuesta = Ext.util.JSON.decode(action.response.responseText);
                   Ext.MessageBox.show({
                     title : 'Error',
                     msg : respuesta.errors.razon,
                     buttons : Ext.MessageBox.OK,
                    icon : Ext.MessageBox.ERROR
                    });
                   } else {
                   Ext.MessageBox.show({
                       title : 'Error',
                       msg : 'Faltan datos!',
                       buttons : Ext.MessageBox.OK,
                       icon : Ext.MessageBox.ERROR
                    });
                   }
                  }
                });
                }
           }]
});
var win = new Ext.Window({
   title : 'agregar',
   iconCls : 'icono',
   layout : 'fit',
   width : 280,
   height : 120,
   closable : true,
   resizable : false,
   border : true,
   modal : true,
   constrain : true,
   items : form
});
</script>
    </head>
    <body>
       
    </body>
</html>

Invitado
18/09/2010

imagino que trabajaras con mysql, no? pues puedes hacerlo de la sigte manera: necesitas un objeto data, por ejemplo un JsonStore:

var store = new Ext.data.JsonStore({
	url : "pagina.php",//1
	root : 'datos',//2
	idProperty : 'id_interno',//3
	fields : ['id_interno','nombre','apellido'],//4
	autoLoad : {params:{operacion : "consultar"}//5
	}
});

1) aqui colocas el nombre de tu pagina en php, en mi caso, que devolverá en formato json los campos que quieres mostrar en tu grid. 2) este es el campo json que engloba los registros devueltos, por ejemplo : {success:true,[b]datos[/b]:[{"id_interno":"1","nombre":"Juan","apellido":"Lopez"},{"id_interno":"2","nombre":"Maria","apellido":"Soto"}]} 3) esta propiedad se supone que enlaza que campo usaras de indice pero no he encontrado referencia en la API, que por cierto es la mejor forma de aprender buscando para que sirve cada propiedad. 4) los campos que quieres manejar, no necesariamente debes mostrarlos todos en tu grid, aqui los he configurado de manera simple sobre todo si son campos de texto(string) pero si vas a usarlos para alguna operación matemática por ejemplo o contienen fechas que querrás mostrar con algún formato entonces tendrás que asignarles algunas propiedades, por ejemplo:

'id_interno',
{name: 'fecha', type: 'date', dateFormat:'Y-m-d H:i:s'},
{name : 'total', type : 'int'}

estos campos después los enlazaras con tu grilla. 5)con el autoLoad() tu store (almacén) se cargará automáticamente cuando cargue la pagina, no siempre querrás eso en todo caso, y puedes pasarle algún parámetro a controlar por el lado del php. Por ejemplo yo primero empecé haciendo una pagina php por cada operación, por ejemplo agregar.php, editar.php, consultar.php, etc, que me sirvió para aprender pero luego los fusione en un solo archiov al cual le paso los parámetros para indicarle que operación quiero realizar. esto me permite controlar mejor si hago algún cambio. tu archivo php puede tener una configuración como sigue:

<?php
	require_once ("conexion.php");//aqui tengo mi php con los datos de conexion
	require_once("error.php");//manejo los errores desde aqui
        require_once("funciones.php");//funciones adicionales
        $sql="SELECT * FROM personas ORDER BY id_interno";
        $arr = array();
	$rs = mysql_query($sql) or falla("servidor", mysql_errno());
        while($obj = mysql_fetch_object($rs)){
             $arr[] = $obj;
        }
	Echo '{success:true,datos:'.json_encode($arr).'}';
?>

luego de tener tu store y tu php asginas a tu grid el store y defines que campos mostraras y como lo haras:

var grid = new Ext.grid.GridPanel({
	id : 'grilla',
	enableColumnHide : false,
	store: store, //1
	columns : [
		new Ext.grid.RowNumberer(),//2
		new Ext.grid.CheckboxSelectionModel(),//3
		{header : 'id_interno', dataIndex : 'id_interno', hidden : true},//4
		{header : 'Nombre', dataIndex : 'nombre', width : 200, sortable : true},
                {header : 'Apellido', dataIndex : 'apellido', width : 200, sortable : true}
	], 
	stripeRows : true,//5
	tbar : tbBarra//6
});

1) aquí enlazas tu almacén (store) 2) en la definición de las columnas puedes decirle que quieres las filas numeradas 3) también que quieres seleccionar por medio de un checkbox 4) la configuración de los campos que mostraras, o que no por ejemplo con hidden:true, donde Header indicara la cabecera y dataIndex el campo enlazado con tu store, puedes decirle que ancho tendrá la columna o si se puede ordenar a través de esa columna (cuando haces clic en la cabecera. si has a mostrar fechas o monedas con la propiedad renderer: {header : 'Fech Mov.', dataIndex : 'fecha_movimiento', width : 30, sortable : true, [b]renderer : Ext.util.Format.dateRenderer('d/m/Y')[/b], align : 'center'}, {header : 'Valor Unit.', dataIndex : 'valor', width : 80, sortable : true,[b] renderer: moneda,[/b] align : 'right'}, puedes crear tus propios renderers, modificando alguno que exista por ejemplo. es bueno configurar un [b]pagingToolbar[/b] si tu grid va a mostrar muchos resultados. 5) esta propiedad le da a tu grilla un color distinto, suave en todo caso, a cada fila. 6) aqui le agrego una barra con botones que tengo previamente definida. para agregar datos a tu base con un formulario puedes usar una configuración básica de window + formpanel:

var form = new Ext.FormPanel({
	labelWidth : 70,
	url : 'pagina.php',//1
        defaults : {
                xtype : 'textfield'//2
        },
	items : [
           {
                 fieldLabel : 'nombre',
                 id : 'nombre' //3 
            }, {
                 fieldLabel : 'apellido',
                 id : 'apellido'          
            }],
	fbar : [{//4
		xtype : 'button', iconCls: 'guardar', tooltip: 'Guardar los datos',
		handler : function(){
			form.getForm().submit({
				method : 'POST',
				params : {operacion : 'agregar'},//5
				waitTitle : 'Conectando',
				waitMsg : 'Enviando datos...',
				success : function(){//6
				        win.close();
				        var store = Ext.getCmp('grilla').getStore();
				        store.reload();
			         },
			    failure : function(form, action){//7
				     if (action.failureType == 'server'){
					   respuesta = Ext.util.JSON.decode(action.response.responseText);
					    Ext.MessageBox.show({
						   title : 'Error',
						   msg : respuesta.errors.razon,
						   buttons : Ext.MessageBox.OK,
						  icon : Ext.MessageBox.ERROR
					     });
				       } else {
					    Ext.MessageBox.show({
						     title : 'Error',
						     msg : 'Faltan datos!',
						     buttons : Ext.MessageBox.OK,
						     icon : Ext.MessageBox.ERROR
					     });
				       }
			         }
		          });
	             }
           }]
});
var win = new Ext.Window({
	title : 'agregar',
	iconCls : 'icono',
	layout : 'fit',
	width : 280,
	height : 120,
	closable : true,
	resizable : false,
	border : true,
	modal : true,
	constrain : true,
	items : form
});

1) nuevamente debes hacer referencia a la pagina que manejará tu informacion, que puede ser la misma u otra pagina distinta a la usada anteriormente, va a depender de como quieras trabajar 2) en la definicion de tu formulario es util usar la propiedad [b]defaults[/b] que te permite ahorra lineas de codigo para los items que estaran contenidos en tu form que sean comunes. 3)lo importante es el [b]id[/b] de los campos que sera lo que se enviará via POST a tu pagina.php, si usas un combo y quieres capturar el valor oculto en tu pagina.php no olvides configurar la propiedad hiddenName porque sino te enviara lo que aparece en el combo y no el valor interno. 4) aquí le asigno un botón al form pero en estricto rigor igual podia haberlo asignado a la ventana. 5) dentro de la función que se ejecuta cuando haces clic en el botón hago el submit del form y puedo agregarle algún parámetro adicional que desee. 6) en el success del submit cierro la ventana y refresco mi store, que a su vez refrescará el contendio del grid. 7) en el failure pregunto si el tipo de falla fue de server y le devuelvo un error personalizado, por ejemplo si por el lado del php hago alguna comprobación puedo devolverle al usuario un mensaje explicando que falló. en tu lado del php capturas los datos asi:

$nombre = $_POST['nombre'];//1
$apellido = $_POST['apellido'];
$sql = "SELECT * FROM personas WHERE nombre = '$nombre' AND apellido='$apellido'";//2
$rs = mysql_query($sql);
if (mysql_num_rows($rs) > 0) {//3
	echo "{success:false, errors: { razon: 'ya existe una persona con ese nombre y apellido' }}";;
} else {
	$sql = "INSERT INTO personas (nombre, apellido) VALUES ('$nombre','$apellido')";//4
	$rs = mysql_query($sql);
	echo "{success:true}";
}

1) capturo los datos y los asigno a variables 2) compongo mi consulta para ver que no exista otro dato repetido 3) si la consulta me devuelve un dato quiere decir que ya existe y le devuelvo un mensaje de error al usuario 4)inserto los datos y devuelvo el json con success para cerrar al lado del cliente la ventana espero que te sea de utilidad, yo soy autodidacta y puede que tenga algunos errores en la concepción de mi código pero funciona, espero no haber sido demasiado básico y siéntete libre de consultar, existe mucha gente con buena voluntad que te dará algo de su tiempo para ayudarte a aprender y a he aprendido un kilo en este foro. lo más importante es saber como plantear la pregunta. de hecho muchas veces en el proceso de construir mi consulta para explicarla de la mejor manera posible he encontrado la respuesta a mi duda, jajaja. suerte.

tokkaido
15/09/2010

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.