Archivo

Posts Tagged ‘grid’

Struts2, JSON y ExtJS – Ejemplo practico

mayo 9, 2011 7 comentarios

En la pasada entrega se reviso la manera en que podemos regresar una respuesta JSON desde Struts2, esta vez esto nos servirá para integrar Struts2 a ExtJS por lo que se realizará el ejemplo de un grid (ejemplo que también ya se realizo aqui) que toma los datos desde una BD y se llena de manera dinámica.

Este ejemplo no esta enfocado a la manera en que se realizará la obtención de los datos, por lo que unicamente para efectos del ejemplo se mostrará el código necesario.

El primer paso es crear un Bean que modelara las caracteristicas del objeto persona que mostraremos en la pantalla.

public class Persona implements Serializable{

/**
*
*/
private static final long serialVersionUID = 1L;
private int matricula;
private String nombre;
private String apPaterno;
private String apMaterno;

public Persona (int matricula, String paterno, String materno, String nombre){
this.apMaterno = materno;
this.apPaterno = paterno;
this.nombre = nombre;
this.matricula = matricula;
}

/**
* Getters y Setters de las variables de instancia
*/
}

Leer más…

ExtJS – Simple Grid

diciembre 16, 2010 4 comentarios

En el anterior post vimos como realizar un formulario muy sencillo con ExtJS, en esta ocasión realizaremos un ejemplo muy básico de como realizar el llenado y visualización de un grid mediante el uso de ExtJS.

En este ejemplo al igual que en el anterior utilice:

  • Eclipse IDE
  • JSP
  • Tomcat

Cómo primer paso se deben añadir las referencias necesarias para el uso de ExtJS dentro del archivo que servirá como base de la construcción, en este caso es un archivo JSP y las referencias a añadir son las siguientes:

<link rel=”stylesheet” type=”text/css” href=”../resources/css/ext-all.css” />
<script type=”text/javascript” src=”../js/ext-base.js”></script>
<script type=”text/javascript” src=”../js/ext-all.js”></script>
<script type=”text/javascript” src=”../js/pages/grid.js”></script>
<script type=”text/javascript” src=”../js/build/locale/ext-lang-es.js”></script>

Cómo se puede ver en el código anterior se hace referencia a un archivo llamado grid.js, este archivo contendrá el código necesario de ExtJS para la construcción del grid. Hago notar que las demás referencias que se muestran en el código corresponden a archivos que se encuentran en el framework de ExtJS.

Antes de comenzar con la generación del código JavaScript se debe considerar que ExtJS para el caso de los Grids maneja 3 diferentes orígenes de datos o mejor dicho 3 formas a partir de las cuales se puede llenar un Grid y estas son:

  • Desde un Array de Strings.
  • Desde un objeto JSON.
  • Desde un archivo XML.

Para este ejemplo utilizaremos un Array, en ejemplos posteriores se vera el manejo de objetos JSON, cómo ya mencionamos este ejemplo tomara los datos de un Array por lo que el primer paso es generar ese Array con los datos que mostrará nuestro grid.

var dataPersons = [ [ 1, ‘Jose’, ‘Perez’, ‘Perez’ ],
[ 2, ‘Juan’, ‘Sanchez’, ‘Sanchez’ ],
[ 3, ‘Ramona’, ‘Sanchez’, ‘Perez’ ],
[ 4, ‘Chimoltrufia’, ‘Perez’, ‘Sanchez’ ] ];

Ahora continuamos con la definición del origen de los datos que en este caso sera del Array y eso se hace mediante la creación de un Reader de la siguiente manera:

var readerPersons = new Ext.data.ArrayReader( {
idIndex : 0
}, [ {
name : ‘matricula’,
type : ‘int’
}, ‘nombre’, ‘apPaterno’, ‘apMaterno’ ]);//Se definem los nombres de los campos de cada registro y en el caso de la  //matricula el tipo.

Una vez hecho lo anterior definimos el Store que indicará el de dónde se obtienen los datos (Array) y el con qué los vamos a leer (Reader).

var store = new Ext.data.Store( {
data : dataPersons,
reader : readerPersons
});

El penultimo paso es modelar las columnas a visualizar y algunas propiedades que deseamos que tenga nuestro Grid. En este caso en el modelado definiremos que todas nuestras clases sean ordenables.

var personaColMod = new Ext.grid.ColumnModel( {
columns : [ {
header : “Matricula”,
dataIndex : ‘matricula’,//El valor del dataIndex corresponde al definido en el Reader
sortable : true
}, {
header : “Nombre”,
dataIndex : ‘nombre’,//El valor del dataIndex corresponde al definido en el Reader
sortable : true
}, {
header : “Ap. Paterno”,
dataIndex : ‘apPaterno’,//El valor del dataIndex corresponde al definido en el Reader
sortable : true
}, {
header : “Ap. Materno”,
dataIndex : ‘apMaterno’,//El valor del dataIndex corresponde al definido en el Reader
sortable : true
} ]
});

Finalmente indicaremos en dónde se va a visualizar nuestro grid, esto mediante la definición de un GridPanel.

var grid = new Ext.grid.GridPanel( {
renderTo : Ext.getBody(),
frame : true,
title : ‘PERSONAS’,
height : 200,
width : 420,
store : store,//El store definido previamente.
colModel : personaColMod//El modelado de columnas.
});

No hay que olvidar que todo el código de ExtJS se coloca dentro de la función:

Ext.onReady(function() {…………………………….});

Una vez terminado el resultado es parecido a la siguiente imagen.

Cómo pudimos observar es realmente muy sencillo y muy rapido construir un Grid con ExtJS, en entregas posteriores abarcaremos la forma de obtener objetos JSON mediante struts 2, esto con el fin de poder llenar nuestro Grid con datos obtenidos desde una Base de Datos.

Cualquier duda o comentario será bien recibido.

Categorías:Desarrollo, General Etiquetas: , , ,