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: , , ,

The Social Network – Película

diciembre 13, 2010 2 comentarios

Director: David Fincher

Película que retrata el nacimiento de la red social más famosa del mundo y también el rol que toma Mark Zuckerberg, la historia gira en torno a la frase que acompaña el cartel de la película, “No puedes obtener 500 millones de amigos sin hacer algunos enemigos”, bajo esta premisa es en la que se desarrolla la historia.
La trama abarca varios temas que están presentes en todas las sociedades y que me parece que estan retratadas de manera muy real en la película:
  • El valor de la amistad.
  • La ética profesional.
  • La forma en que las personas maduran.

En resumen es una muy buena historia contada de la manera correcta. Y al final te deja con un claro mensaje, “Ideas las tenemos todos, pero el llevarlas a cabo es realmente lo que te lleva al éxito”.

Categorías:General Etiquetas: ,

El Profesor – John Katzenbach

diciembre 8, 2010 1 comentario

Titulo: El Profesor (What Comes Next).

Autor: John Katzenbach.

Genero: Misterio y suspenso.

Sinopsis: El secuestro de una jovencita de 16 por parte de una pareja de psicópatas y el único testigo del hecho un viejo profesor, de esta manera inicia una nueva historia de misterio y suspenso que nos lleva de la mano a lo largo de la investigación que decide hacer el viejo profesor en busca de la jovencita secuestrada.

Realmente la velocidad a la que trascurre la historia es trepidante un suceso tras otro nos engancha a la historia, la rapidez con que suceden los hechos es de suma importancia debido a un factor que acorta el desenlace a cada minuto que pasa.

En general es una historia bien armada, con algunos personajes que nunca imagina uno que van a tener tanto peso en la historia pero que al final son piezas claves dentro del desenlace y un final un tanto inesperado o tal vez un final un poco más apegado a la realidad de la vida.

 

No duden en dejar sus comentarios y/o sugerencias.


Formulario en ExtJS

diciembre 8, 2010 3 comentarios

Empezaremos con una pequeña introducción a ExtJS que es un Framework para la construcción de aplicaciones Web basadas en la filososfía RIA. En este primer ejemplo se trabajara la construcción de un pequeño formulario muy básico el cual constara de diferentes tipos de componentes que nos proporciona ExtJS.

Cómo primer paso debemos considerar que el ejemplo pude realizarse desde un HMTL común y corriente, este ejemplo se realiza utilizando lo siguiente:

  • Eclipse IDE
  • JSP
  • Tomcat

Leer más…

Categorías:Desarrollo Etiquetas: , , ,

Que viaje!!!!!!!

julio 22, 2008 1 comentario

Via microsiervos, me encuentro con este efecto muy curioso. La verdad es que no sabí de que se trataba pero una vez que lo realize me he quedado muy sorprendido. Intentenlo ustedes mismo y no se sorprendan y mandenme sus comentarios a ver que les parecío. A continuación copio y pego las instrucciones traducidas desde microsiervos, y aqui el enlace original que es en donde se encuentra el efecto.

1. Pones una mano con los dedos abiertos en la mesa
2. Amplías la ventana para que la imagen ocupe toda la pantalla si es posible (si no, basta con acercarse un poco)
3. Pulsas el enlace de la parte inferior [4]
4. Te concentras durante 60 segundos en el centro de la imagen en movimiento… y luego miras tu mano

Categorías:General Etiquetas: , , , ,

Los 10 tipos de programadores

mayo 23, 2008 3 comentarios

Esta lista la encontre el día de hoy en tecnologiahechapalabra, aunque ya es algo vieja aun asi creo que aplica muy bien para algunos, jeje XD. Aun no se en cual entro yop y ustedes¿?

Gandalf: Esta persona es como Gandalf de El Señor de los Anillos. Tiene barba hasta las rodillas, gorro y suele llevar capa. Afortunadamente para todos, este personaje trabaja casi tanto como la magia que hace Gandalf, por desgracia, se tira el día contando batallitas. Suelen dejarlo en segundo plano y no tirar de él si no es imprescindible.

El mártir: En cualquier trabajo se le llamaría adicto al trabajo o ‘workaholic’, pero en este mundillo lo lleva a una nueva dimensión. Los adictos al trabajo al menos van a casa a ducharse y dormir. El mártir se enorgullece de dormir en la oficina entre cajas de pizza. La pega es que nadie le pidió que trabajase así. Y encima hace al resto sentirse culpables con frases del tipo “Ve a casa y disfruta de tu cena. Yo acabaré el código para mañana”

Leer más…

Categorías:Desarrollo, General Etiquetas: , ,

10 razones para andar con un geek

La verdad es un copy paste aporte original tomado del blog del buen gamerkore.

1- Hacen más dinero: con sus blogs bien posicionados, haciendo reviews sobre multiples servicios y proporcionando soporte técnico por aquí y por allá, sin gastar en oficinas, transportes, empleados… todo el $$$ se destina al amor de los amores.

2- Son más inteligentes: si bien los tachamos de antisociales no podemos discutir que un geek sabe desde cómo hervir un huevo hasta los componentes del circuito eléctrico de una secadora de pelo, cosa que lo convertirá en un fuerte candidato para ser tu rival.

Leer más…

Categorías:General Etiquetas: , ,