Ext JS - Componentes GUI - GridPanel - Parte 1

En el anterior post mostré como entablar una comunicación con el servidor web mediante Ext.Ajax.request().
Con esto ya puedes hacer mucho, por ejemplo recolectar la información de un formulario y enviar esta data como parámetros en el Ext.Ajax.request() para que luego el Servlet pueda grabarlos en base de datos y con esto tendrías un procesamiento de formulario por AJAX sin que se esté refrescando la página después de guardar. Pero para envió de datos de formulario ya veremos más adelante el uso de los FormPanel de Extjs. Vamos poco a poco.

A partir de este post ya comenzaré a mostrar el uso de los principales componentes de ExtJS. Componentes como GridPanel, FormPanel, TreePanel, etc.

Puedes ver todos los ejemplos de extjs en el siguiente link: http://dev.sencha.com/deploy/ext-4.0.0/examples/

En este post, hablaré sobre el GridPanel, el cual es un componente que te permite mostrar información como una tabla, así como lo hace el JTable de Swing.

Un ejemplo del resultado de este componente puedes verlo aquí: http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/array-grid.html

Ahora, para crear un GridPanel, primero debes de conocer los siguiente:

La data que es mostrada en el GridPanel proviene del servidor y es almacenada en un objeto store; un objeto store puede ser un JsonStore el cual espera información en formato JSON proveniente del servidor. Ahora pasamos a crear los códigos necesarios para que funcione nuestro GridPanel:

1) Creamos el JsonStore:

  var clienteData = new Ext.data.JsonStore({
       autoDestroy: true,
       proxy: {
           type: 'ajax',
           url: 'ClienteServlet',
           reader: {
               type: 'json',
               root: 'data'
           }
       },
       autoLoad:true,
       fields: [
                {name:'cliente_id', type: 'int'}, 
                {name:'tipoDeCliente.name', type:'string', mapping: 'tipoDeCliente.nombre'},
                {name:'codigo', type:'string'},
                {name:'nombre', type:'string'},
                {name:'descuento', type:'float'},
                {name:'activo', type:'int'},
                {name:'creado'},
                {name:'observacion', type:'string'}
                ]
       
  });

El JsonStore debe saber:
a) La url de donde obtendrá los datos.
b) Los campos(fields) que componen el store. Para que así sepa donde colocar la información que viene del servidor.

2) Creamos el Servlet de Respuesta:

public class ClienteServlet extends HttpServlet { 
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  response.setContentType("text/plain");
  PrintWriter out = response.getWriter();
  List clientes = Cliente.getDummyClientes();
  JSONArray array = new JSONArray();
  array.addAll(clientes);
  JSONObject jsonObject = new JSONObject();
  jsonObject.put("data", array);
  out.print(jsonObject);
  out.close();
 }
}

El objetivo principal acá es enviar información en formato JSON al cliente(browser) para que el objeto JSONStore se cargue de datos. Es por eso que se utiliza las clases JSONArray y JSONObject, las cuales se encuentran en la librería json-lib.jar.

El jar y sus dependencias pueden descargarlos desde este link:
http://lima-ti.com/public/mayer/blogger/demo03_ExtJS_Componentes_GridPanel/json_lib_and_dependencies.zip

Para mayor información, La página de json-lib es:
http://json-lib.sourceforge.net/

Este conjunto de nuevas clases te permiten crear objetos JSON a partir de un JavaBean o un Arreglo de JSON a partir de una collección.

Hasta aquí se ha creado el JSONStore y el Servlet que envía los datos para que el store se cargue. Pero todo esto no es visual, asi que es momento de crear el objeto GridPanel para poder presentar los datos.

3) Creamos el GridPanel:

  var clienteGrid = new Ext.grid.GridPanel({
      title: 'Lista de Clientes',
      store: clienteData,
      columns: [
          { header: 'Codigo',  dataIndex: 'codigo' },
          { header: 'Nombre', dataIndex: 'nombre' },
          { header: 'Tipo de Cliente', dataIndex: 'tipoDeCliente.name' },
          { header: 'Descuento', dataIndex: 'descuento', align:'right'},
          { header: 'Activo', dataIndex: 'activo', renderer:siONoRenderer},
          { header: 'Creado', dataIndex: 'creado', renderer:dateRenderer}         
      ],
      height: 200,
      width: 650,
      renderTo: Ext.getBody() 
  });

Las dos últimas columnas tienen la propiedad renderer, lo que indica que al momento de renderizar el valor(justo antes de ser mostrado) se ejecutará estas funciones que se indican, con el fin de alterar o mostrar el mismo valor.

4) Creamos las funciones renderers:

function dateRenderer(jsonDate){
  var dt = Ext.Date.parse(jsonDate.date+'/'+jsonDate.month+'/'+(jsonDate.year>100?(jsonDate.year-100):jsonDate.year), "d/n/y");
  return (Ext.util.Format.date(dt,"d/m/Y"));
 }
 function siONoRenderer(value){
  return value == 1 ? "Si" : "No";
 }

* Las clases java como Cliente, TipoDeCliente y ClienteServlet pueden descargarlo desde aquí:
http://lima-ti.com/public/mayer/blogger/demo03_ExtJS_Componentes_GridPanel/clases_java.rar

Une los códigos de los puntos 1), 3) y 4) dentro de un Ext.onReady(...) como en la demo anterior y ejecútalo. El resultado es el siguiente:


He partido este tuto en dos partes. En el siguiente post hablaré sobre la paginación y el ordenamiento de columnas sobre el GridPanel.

Cualquier duda respecto al código pueden comentarlo en el post.