Usando JSON N03 (en ExtJS)

En el lado ExtJS te toca hacer esto

var datosJSP;

var columnas;

var tabla;

var ventana;

Ext.onReady(function(){

/*

Esto es lo realmente importante en el codigo

esto es todo lo nuevo aqui la lectura de dat

os desde un JSON, funciona asi necesitamos u

n Ext.data.Store el cual define 3 parametros

importantes encapsulados en 2 valores el pri

mero es un Ext.data.JsonReader dentro de est

e se define un campo fields: que es un vecto

r que contiene en orden los campos que serán

leidos y un campo root: que define el nombre

de la variable que contiene los datos en el

JSON.

El otro es un campo proxy: este está definid

o por la url donde estan los datos en format

o JSON

*/

datosJSP = new Ext.data.Store({

reader: new Ext.data.JsonReader({

fields: ['nombre', 'apellido','apodo','telefono','correo'],

root: 'rows'

}),

proxy: new Ext.data.HttpProxy({

url: 'servlet/Listar/Contacto'

}),

autoLoad: true

});

/*columnas define datos sobre cada columna de la tabla

por ejemplo:

-header Titulo

-width Ancho

-sortable Si se puede ordenar esta columna

-dataIndex de donde se saca el dato que va en esta columna este campo es de especial cuidado

porque debe ser una variable definida en el JSON

las columnas son una matriz donde cada fila es una columna y a su vez cada espacio de cada fila es una prodiedad de dicha columna

*/

columnas =[

{header: "Nombre", width: 100, sortable: true, dataIndex: 'nombre'},

{header: "Apellido", width: 100, sortable: true, dataIndex: 'apellido'},

{header: "Apodo", width: 100, sortable: true, dataIndex: 'apodo'},

{header: "Telefono", width: 100, sortable: true, dataIndex: 'telefono'},

{header: "Correo", width: 180, sortable: true, dataIndex: 'correo'}

];

/*

un panel de grillas, mejor dicho una tabla

para los que conocen java es como un JTable

pero mucho mas funcional pues proporciona e

l metodo para ordenar y ya es un componente

visual osea no hay que agregarlo a ningun o

tro componente para visualizarlo

*/

tabla = new Ext.grid.GridPanel({

store: datosJSP,

columns:columnas,

stripeRows: true,

height:250,

width:600,

// renderTo: document.body,

title:'Lista::de::Contactos:::...'

});

ventana = new Ext.Window({

id: 'ventana',

title: '1N63N10 5W',

closable:true,

maximizable:true,

minimizable :true,

closeAction :'hide',

height: 270,

width: 620,

plain:true,

layout: 'fit',

items: tabla

});

});