opa vamos lá, bom eu tbem estou começando, comecei ontem, kkkk mas basicamente o q eu fiz pra usar os componentes do gwtext foi o seguinte:
1) Baixar 2 arquivos e descompactalos num diretório de sua preferencia, são eles: o gwt-ext e o ExtJS neste link tem os 2 [url]
http://gwt-ext.com/download/[/url]
2) Estou usando o netbeans, adicionei no pacote lib, o gwtext.jar
3) Depois dentro do pacote padrão da minha aplicação eu criei um pacote chamado /public ficando +- assim a estrutura:
pacote padrão: org.yournamehere
org.yournamehere.public
org.yournamehere.client
org.yournamehere.server
org.yournamehere.dao
org.yournamehere.beans
e por ai vai....
4) Copiei dentro do pacote /public os seguintes arquivos e diretorios do extjs
/adapter
/resources
ext-all.js
ext-all-debug.js
ext-core.js
ext-core-debug.js
5) Fiz a minha classe de teste segue ela abaixo tah meio grandinha e bagunçada, mas é um teste q funciona hahaha:
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package org.yournamehere.client.consultas;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.Image;
import com.gwtext.client.data.Record;
import java.util.List;
import org.yournamehere.beans.Clientes;
import com.gwtext.client.core.EventObject;
import com.gwtext.client.data.ArrayReader;
import com.gwtext.client.data.FieldDef;
import com.gwtext.client.data.MemoryProxy;
import com.gwtext.client.data.Reader;
import com.gwtext.client.data.RecordDef;
import com.gwtext.client.data.Store;
import com.gwtext.client.data.StringFieldDef;
import com.gwtext.client.widgets.Button;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.Toolbar;
import com.gwtext.client.widgets.ToolbarButton;
import com.gwtext.client.widgets.event.ButtonListenerAdapter;
import com.gwtext.client.widgets.grid.ColumnConfig;
import com.gwtext.client.widgets.grid.ColumnModel;
import com.gwtext.client.widgets.grid.GridPanel;
import com.gwtext.client.widgets.grid.RowSelectionModel;
import com.gwtext.client.widgets.grid.event.RowSelectionListener;
/**
* Example class using the ConsultarClientesService service.
*
* @author Cleiton
*/
public class ConsultarClientes extends DecoratorPanel {
private Image gif = new Image("./imagens/carregando.gif");
private Panel panel = new Panel();
private RecordDef recordDef = new RecordDef(
new FieldDef[]{
new StringFieldDef("cpf"),
new StringFieldDef("nome"),});
private ColumnConfig[] columns = new ColumnConfig[]{
new ColumnConfig("Cpf", "cpf", 100, true, null, "cpf"),
new ColumnConfig("Nome", "nome", 300, true)};
private ColumnModel columnModel = new ColumnModel(columns);
private final GridPanel grid = new GridPanel();
private Reader reader = new ArrayReader(recordDef);
private Store store = new Store(reader);
public ConsultarClientes() {
gif.setVisible(false);
panel.setBorder(false);
panel.setPaddings(15);
grid.setColumnModel(columnModel);
grid.setFrame(true);
grid.setStripeRows(true);
grid.setAutoExpandColumn("cpf");
grid.setHeight(350);
grid.setWidth(600);
grid.setTitle("Array Grid");
Toolbar bottomToolbar = new Toolbar();
bottomToolbar.addFill();
bottomToolbar.addElement(gif.getElement());
bottomToolbar.addButton(new ToolbarButton("Listar clientes", new ButtonListenerAdapter() {
@Override
public void onClick(Button button, EventObject e) {
gif.setVisible(true);
listarClientes();
}
}));
grid.setBottomToolbar(bottomToolbar);
RowSelectionModel selectionModel = new RowSelectionModel(true);
selectionModel.addListener(new RowSelectionListener() {
@Override
public boolean doBeforeRowSelect(RowSelectionModel sm, int rowIndex, boolean keepExisting, Record record) {
return true;
}
@Override
public void onRowDeselect(RowSelectionModel sm, int rowIndex, Record record) {}
@Override
public void onRowSelect(RowSelectionModel sm, int rowIndex, Record record) {
String[] fields = record.getFields();
String linha = "";
for (String s : fields) {
linha += record.getAsString(s) + " - \n";
}
Window.alert(linha);
}
@Override
public void onSelectionChange(RowSelectionModel sm) {}
});
grid.setSelectionModel(selectionModel);
panel.add(grid);
Object[][] data = getCompanyData();
MemoryProxy proxy = new MemoryProxy(data);
store.setDataProxy(proxy);
store.load();
grid.setStore(store);
setWidget(panel);
}
private Object[][] getCompanyData() {
return new Object[][]{
new Object[]{"[telefone removido]", "aaa"},
new Object[]{"[telefone removido]", "bbb"},
new Object[]{"[telefone removido]", "ccc"},
new Object[]{"[telefone removido]", "ddd"},
new Object[]{"[telefone removido]", "eee"},
new Object[]{"[telefone removido]", "fff"},
new Object[]{"[telefone removido]", "ggg"},
new Object[]{"[telefone removido]", "iii"},
new Object[]{"[telefone removido]", "hhh"},
new Object[]{"[telefone removido]", "jjj"},};
}
private void listarClientes() {
AsyncCallback<List<Clientes>> cbClientes = new AsyncCallback<List<Clientes>>() {
@Override
public void onFailure(Throwable caught) {
gif.setVisible(false);
Window.alert(caught.getClass().getName() + " - " + caught.getMessage());
}
@Override
public void onSuccess(List<Clientes> result) {
gif.setVisible(false);
Object[][] data = new Object[result.size()][];
for (int i = 0; i < result.size(); i++) {
Clientes c = result.get(i);
data[i] = new Object[]{c.getCpf(), c.getNome()};
}
MemoryProxy proxy = new MemoryProxy(data);
store.setDataProxy(proxy);
store.load();
grid.reconfigure(store, columnModel);
gif.setVisible(false);
}
};
getService().listarClientes(cbClientes);
}
public static ConsultarClientesServiceAsync getService() {
ConsultarClientesServiceAsync service = (ConsultarClientesServiceAsync) GWT.create(ConsultarClientesService.class);
ServiceDefTarget endpoint = (ServiceDefTarget) service;
String moduleRelativeURL = GWT.getModuleBaseURL() + "consultas/consultarclientesservice";
endpoint.setServiceEntryPoint(moduleRelativeURL);
return service;
}
}
inicialmente, a grid exibe dados estaticos, mas depois de clicar no botão listar clientes na bottomToolBar, ele busca clientes de uma tabela no banco, e tem o evento onRowSelect que exibe um Window.alert(...), com os dados da linha selecionada. E pra testar, basta na sua classe entrypoint fazer assim
public void onModuleLoad() {
RootLayoutPanel.get().add(new ConsultarClientes());
}
eu acho q pra quem ja tem uma "noçãozinha" de como funciona a comunicação com banco e do gwt em geral, o código nao esta dificil de entender, mas qq duvida sobre o código tamo ai pra trocar idéias, que aliás eu ja vou fazer uma pergunta pra vcs sobre esse grid ai a respeito de um columnModel de objetos, como é feito em swing...
os passos descritos acima foram originalmente seguidos de [url]http://www.gwt-ext.com/wiki/index.php?title=Tutorial:Introduction_to_GWT-Ext_2.0[/url]