27
Oct
10

Usando JSON N03 (en ExtJS)

Siguiendo la primera parte a este post Usando JSON N01 (en el bean)
Siguiendo la parte anterior a este post Usando JSON N02 (en el controller)
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'
   }),
 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
 });
});

3 Responses to “Usando JSON N03 (en ExtJS)”


  1. 1 WALTER
    mayo 10, 2010 a las 6:59 pm

    tienes muy buenos ejemplos espero que sigas dejando ejemplos

  2. diciembre 9, 2010 a las 8:36 am

    Hola podrias poner el codigo del servlet al que te refieres en URL

    url: ‘servlet/Listar/Contacto’

    para ver que ando haciendo mal o enviarme un ejemplo completo a mi correo gracias de antemano por tu tiempo

    Te cuento que consulto me devuelve un resulset basado en Webservices pero no alcanzo a desplegarlo he intentado con un ajax request desde extjs pero parece como que no me reconoce los datos o no sabe como interpretarlos ayuda!!!!!

  3. diciembre 9, 2010 a las 9:22 am

    necesito implementar un sistema usando las siguientes tecnologias

    Jdeveloper 10 para programar webservices que trabajen contra paquetes oracle PLSQL JSP JAVA

    BAse de datos oracle 10g

    y como front EXTJS

    Si me puedes ayudar con enlaces tutoriales videos o codigo etc, te estare muy agradecido


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


I+Ds

Dudas consultas
Facebook
Twiter
Google +

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevas publicaciones por correo.

Únete a otros 348 seguidores

Ingenio DS en Facebook

Redes Sociales y Archivos

Entradas

octubre 2010
L M X J V S D
« Ago   Nov »
 123
45678910
11121314151617
18192021222324
25262728293031

IngenioDS en twiter


A %d blogueros les gusta esto: