:: luen.org :: El ataque del geek ye-ye

EXT JS 4, PHP y MySQL (I) Coger datos

Hola gente.

He estado ocupado haciendo cosas (si, Peter, cosas nazis). Una de ellas es empezar a pelearme con EXT JS y como me está costando habituarme, voy  utilizar el blog para ir recogiendo los cachos de código que más o menos ya les tengo una aplicación, para tenerlos de referencia por aquí para cuando no me acuerde de nada.

Una de las cosas más vitales que necesitaba sacarle a EXT JS era la necesidad de recoger datos, mediante PHP, de una base de datos MySQL y generar un grid con esos datos (y además meterlos en una ventana).

Si, por un casual, llegáis por el interés gracias a Google. Aquí tenéis un ejemplo práctico y sencillo. Se trata de recoger la información de una tabla de prueba cuyos campos son: id, nombre y apellido.

Supondremos que ya tenéis la librería ext js en su versión 4 y que ya sabéis como manejaros con las conexiones MySQL con PHP.

En fin, el archivo js ha de tener esta pinta.

Ext.onReady(function() {
// Crea el almacen de datos
var dbStore = new Ext.data.JsonStore({
  totalProperty: 'total', 
  root: 'results',  
  proxy: {
    type: 'ajax',
    url: 'getdata.php', // archivo que contiene las operaciones mysql
    actionMethods: {
        create: 'POST', 
        read: 'POST', 
        update: 'POST', 
        destroy: 'POST'
    },
    reader: {
      type: 'json',
      root: 'results',
      idProperty: 'nombre'
    }
  },
fields: [
    {name: 'id', type: 'int'},'nombre', 'apellidos'
  ]
});

dbStore.load();

// Genera el grid

var listado=Ext.create('Ext.grid.Panel', {

    store: dbStore, //datos del grid
    columns: [
       {
            id:'id',
            header: 'ID', 
            width: 30, 
            sortable: true, 
            dataIndex: 'id'
       },
       {
            text: 'Nombre',
            width: 100,
            sortable: true,
            hideable: false,
            dataIndex: 'nombre'
        },
        {
            text: 'Apellidos',
            width: 150,
            dataIndex: 'apellidos',
            hidden: false,
            sorteable: true
        }
    ]
});

// Crea la ventana invocando dentro al grid

var gridWindow = new Ext.Window({
    title: 'Listado',
    layout: 'fit',
    items: [
        listado
    ]
});
// Muestra la ventana
gridWindow.show();

});

Y el archivo getdata.php

// incluye los datos de conexión al servidor
include "privado/bd.php"; 

$result=mysql_query ("SELECT * FROM prueba") 
          or die (mysql_error ()); 	
$data = array(); 	
while ($row=mysql_fetch_object($result)) { 
      $data [] = $row; 	
}   	
echo json_encode($data);

Con esto ya tenemos una comunicación exitosa entre mysql y EXT JS. Ahora toca averiguar como editar en vivo, actualizando la información de la BBDD.

Ale, al tajo.