En esta ocacion a peticion de un amigo presento que pasos y consideraciones debes seguir para poder cargar datos en un control GRID de Extj-GWT ( de www.sencha.com) .
Esto es para la version 4 de GWT y 3 de GXT.
Consideraciones:
1. GWT utiliza el motor AJAX para el intercambio de datos y al utilizar GXT (GXT = ExtGWT de sencha.com ) por encima nos da dos formatos de datos para trabajar: XML y JSON.
2. Al utilizar GXT y MVC utilizamos una clase midleware POJO de definicion de datos, es esta clase en la que se definen el tipo de datos a intercambiar.
3. Definir bien el set y caracteristicas de datos a intercambiar, cuando los datos proceden de varias fuentes como datos de factura y detalle de factura para mostrar una lista es logico pensar que podrian pasar una coleccion de clases que contienen otras clases, pero esto es mas dificil/tardado por lo que se puede optar a crear una definicion de datos para ese grid en particular y solo pasar registros planos, es decir que no contienen subClases.
Pasos:
1. Creamos la Deficion de datos que vamos a intercambiar es decir que los datos que seran enviados desde el servidor al Control GRID del lado del cliente. Esto se hace en el paquete de la seccion shared del GWT. Se sugiere en esta seccion crear un paquete llamado model o modelo, donde se almacenan los modelos o POJOs de las clases de datos. La nuestra clase debe extender la clase BaseModelData.
2. Creamos el servicio para la entrega de los datos. Este es el metodo que solicitara los datos desde el cliente al servidor, con o sin parametros, el plugin automáticamente crea una llamada a un servlet en el web descriptor del proyecto. Esto se hace en la seccion "Client" del GWT se aconseja un paquete llamado DAO, que se explica por si solo.
Este paquete se dispara/activa desde el control cliente en el navegador y hace una peticion via AJAX al servidor utilizando un endPoint de servlet, revisa la respuesta y en caso de ser correcta la entrega al GRID para que la muestre.
3. En la clase del formulario:
a) Instanciar los servicios remotos. Puede hacerlo antes o despues de pintar el grid.
b) Definiendo el GRID
- Crear la definicion de las columnas
- Crear los cargadores de los datos
- Definir el Store
- crear el objeto grid pasandole como parametro las columnas y el store creado.
- Cargar los datos, esto lo puede hacer para que lo haga automaticamente cuando termine de dibujarse o para que sea manual mediante algun boton.
// Comment
package ni.com.empresa.client.vista.catalogos;
import java.util.ArrayList;
import java.util.List;
import ni.com.empresa.client.dao.LineanavieraDAO;
import ni.com.empresa.client.dao.LineanavieraDAOAsync;
import ni.com.empresa.client.vista.comunes.Mensajes;
import ni.com.empresa.client.vista.recursos.Resources;
import ni.com.empresa.client.vista.widget.Reporte;
import ni.com.empresa.shared.modelo.Lineanaviera;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.ListLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GroupSummaryView;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
public class LineasNavierasCatalogoFrm extends LayoutContainer {
// Controles
LayoutContainer contenedor = new LayoutContainer();
// Proxys
RpcProxy> proxyNavieras = null;
// Servicios
final LineanavieraDAOAsync daoNavieras = (LineanavieraDAOAsync) GWT.create(LineanavieraDAO.class);
// Variables
List configs = new ArrayList();
GroupSummaryView view = null;
ColumnModel cm = null;
Lineanaviera nav = null;
// Aqui definimos el Control GRID lo ponemos como propiedad para que sea alcanzado desde cualquier parte de la clase.
private Grid gridNavieras;
//Constructor de la clase que pinta el GRID.
public LineasNavierasCatalogoFrm() {
initServicios();
iniciaPintar();
//metodo para cargar los datos en el grid automaticamente.
gridNavieras.getStore().getLoader().load();
}
//Metodo Instanciador de servicios de Servicios
void initServicios() {
// Servicio de Consignatarios/Clientes
ServiceDefTarget epConsignatario = (ServiceDefTarget) daoNavieras;
String uriConsignatario = GWT.getModuleBaseURL() + "LineanavieraDAO";
epConsignatario.setServiceEntryPoint(uriConsignatario);
// Carga de Consignatarios
proxyNavieras = new RpcProxy>() {
@Override
protected void load(Object loadConfig, AsyncCallback> callback) {
daoNavieras.getList(callback);
}
};
}
@SuppressWarnings({ "rawtypes", "unchecked" })
void iniciaPintar() {
setWidth("755px");
FormPanel frmpnlNaiveras = new FormPanel();
frmpnlNaiveras.setHeaderVisible(false);
frmpnlNaiveras.setPadding(2);
frmpnlNaiveras.setFrame(true);
frmpnlNaiveras.setSize("755", "330");
frmpnlNaiveras.setHeading("Catalogo de Navieras");
FieldSet fldstNavieras = new FieldSet();
LayoutContainer Contenedor = new LayoutContainer();
//Establecemos las configuraciones de las columnas
configuracionDeColumnas();
ListLoader> listNavieras = new BaseListLoader(proxyNavieras);
ListStore storeNavieras = new ListStore(listNavieras);
cm = new ColumnModel(configs);
gridNavieras = new Grid(storeNavieras, cm);
gridNavieras.setLoadMask(true);
gridNavieras.setAutoExpandMax(600);
gridNavieras.addListener(Events.RowDoubleClick, new Listener() {
@Override
public void handleEvent(GridEvent e) {
nav = ((Lineanaviera) e.getModel());
final Window window = new Window();
window.setSize(470, 275);
window.setResizable(false);
window.setPlain(true);
window.setModal(true);
window.setResizable(false);
window.setBlinkModal(true);
window.setHeading("Edicion Naviera");
window.add(new LineasNavierasFrm(nav));
window.show();
}
});
gridNavieras.addListener(Events.RowClick, new Listener() {
@Override
public void handleEvent(GridEvent e) {
nav = ((Lineanaviera) e.getModel());
}
});
Contenedor.add(gridNavieras);
gridNavieras.setSize("715", "220");
fldstNavieras.add(Contenedor);
Contenedor.setBorders(true);
frmpnlNaiveras.add(fldstNavieras, new FormData("100%"));
fldstNavieras.setHeading("Consignatarios");
ToolBar toolBar = new ToolBar();
toolBar.setBorders(true);
toolBar.setEnableOverflow(false);
Button btnNuevo = new Button("Nuevo ");
btnNuevo.setIcon(Resources.ICONS.add());
btnNuevo.addListener(Events.Select, new Listener() {
@Override
public void handleEvent(ButtonEvent be) {
final Window window = new Window();
window.setSize(470, 275);
window.setResizable(false);
window.setPlain(true);
window.setResizable(false);
window.setModal(true);
window.setBlinkModal(true);
window.setHeading("Nueva Naviera");
window.add(new LineasNavierasFrm());
window.show();
}
});
Button btnRefrescar = new Button("Refrescar ");
btnRefrescar.setIcon(Resources.ICONS.task());
btnRefrescar.addListener(Events.Select, new Listener() {
@Override
public void handleEvent(ButtonEvent e) {
gridNavieras.getStore().getLoader().load();
}
});
toolBar.add(btnRefrescar);
toolBar.add(btnNuevo);
Button btnConsultar = new Button("Consultar ");
btnConsultar.setIcon(Resources.ICONS.form());
btnConsultar.addListener(Events.Select, new Listener() {
@Override
public void handleEvent(ButtonEvent e) {
if (nav != null) {
LineasNavierasFrm frmNaviera = new LineasNavierasFrm(nav);
frmNaviera.btnSalvar.setEnabled(false);
final Window window = new Window();
window.setSize(470, 275);
window.setResizable(false);
window.setResizable(false);
window.setPlain(true);
window.setModal(true);
window.setBlinkModal(true);
window.setHeading("Consulta Naviera");
window.add(frmNaviera);
window.show();
} else {
MessageBox.alert("Error de Seleccion", "No ha seleccionado una Naviera", null);
}
}
});
toolBar.add(btnConsultar);
Button btnEliminar = new Button("Eliminar");
btnEliminar.setIcon(Resources.ICONS.delete());
btnEliminar.addSelectionListener(new SelectionListener() {
@Override
public void componentSelected(ButtonEvent ce) {
}
});
btnEliminar.addListener(Events.Select, new Listener() {
@Override
public void handleEvent(ButtonEvent e) {
if (nav != null) {
LineanavieraDAOAsync serviceConsignatarios = LineanavieraDAO.Util.getInstance();
serviceConsignatarios.delete(nav.getIdlineanaviera(), new AsyncCallback() {
@Override
public void onFailure(Throwable caught) {
Mensajes.error(caught.getMessage());
}
@Override
public void onSuccess(Void result) {
Mensajes.deleteOK("Naviera Eliminada!");
gridNavieras.getStore().getLoader().load();
}
});
} else {
MessageBox.alert("Error de Seleccion", "Seleccione Naviera a Eliminar!", null);
}
}
});
toolBar.add(btnEliminar);
Button btnVistaPreliminar = new Button("Vista Preliminar");
btnVistaPreliminar.addListener(Events.Select, new Listener() {
@Override
public void handleEvent(ButtonEvent e) {
Window w = new Window();
w.setSize(900, 600);
w.setModal(true);
w.add(new Reporte(21, Reporte.PDF, "", false));
w.show();
}
});
btnVistaPreliminar.setIcon(Resources.ICONS.print01());
toolBar.add(btnVistaPreliminar);
frmpnlNaiveras.add(toolBar, new FormData("100%"));
add(frmpnlNaiveras);
}
//Metodo para definir las caracteristicas de las columnas
private void configuracionDeColumnas() {
configs = new ArrayList();
ColumnConfig idlineanaviera = new ColumnConfig("idlineanaviera", "Id", 80);
configs.add(idlineanaviera);
ColumnConfig nombrenaviera = new ColumnConfig("nombrenaviera", "Naviera", 150);
configs.add(nombrenaviera);
ColumnConfig nombrecontacto = new ColumnConfig("nombrecontacto", "Contacto", 150);
configs.add(nombrecontacto);
ColumnConfig telefonoscontacto = new ColumnConfig("telefonoscontacto", "Telefono", 100);
configs.add(telefonoscontacto);
ColumnConfig clmncnfgEmail = new ColumnConfig("email", "Email", 100);
configs.add(clmncnfgEmail);
ColumnConfig estatus = new ColumnConfig("estatus", "Estatus", 70);
configs.add(estatus);
ColumnConfig idpais = new ColumnConfig("pais", "Pais", 70);
configs.add(idpais);
}
}
No hay comentarios:
Publicar un comentario