PDA

View Full Version : How to populate a combo or grid or form?



Reghin
7 Jul 2009, 5:02 AM
Hello all.

I'm kinda new to GXT and I have no clue how to populate any data-aware component, like combos, grids, forms, etc.

I tried to find some howto, but no luck so far. Code snipets and fragments are not helping much. :(

The environment I got is:

Eclipse 3.4
GWT 1.6.4
Hibernate 3
Gilead 1.2.3
GXT 2.0

Everything is working great. Persistence is okay. All entities are going back and forth (thanks to Gilead) on GWT.

Could somebody tell me where to find a complete example, or give me one, so I can learn how to link my entities to a form, or a grid, or a combo? A CRUD would be great! :D

Thank you in advance,

Roger Reghin.

gnaigaonkar
7 Jul 2009, 5:59 AM
If you need a complete example, I would suggest try the tutorials on the GWT homepage itself. They have a couple of good tutorials. Once you are familiar with GWT, you can use extjs to change the look and feel of your project.

Reghin
7 Jul 2009, 8:31 AM
Well, I'm quite familiar to GWT and as I said, GWT+Hibernate are working correctly.

I'm also quite familiar to ExtJS. Actually, I have part of my system working on ExtJS+DWR. But now we are migrating to a 100% Java solution, so I have to redevelop almost everything from scratch (for the view and control layers only).

So, from my experience with ExtJS in order to handle data and data events I thought I had to create a Record and a DataStore and a Proxy and a Reader (at least). How do I do this on GXT 2?

I'll try to find something useful once more on the GXT examples. It seems that the examples pages are quite outdated and still based on GXT 1.

gnaigaonkar
7 Jul 2009, 8:47 AM
So have you setup your basic components using EXT GWT? or are you stuck at the initial point?

Reghin
7 Jul 2009, 8:58 AM
Yes, Ext GWT components are setup. I already have windows, forms, fields, etc but none of them are data-bound yet. That's where I'm stuck, binding the components to the data coming from GWT-RPC services.

gnaigaonkar
7 Jul 2009, 9:38 AM
are you passing beans between client and server?

Reghin
7 Jul 2009, 9:44 AM
Yes.

gnaigaonkar
7 Jul 2009, 9:51 AM
You could populate a grid something like this.




Assuming data to be displayed is present in an ArrayList <classname> array_list

BeanModelFactory factory = BeanModelLookup.get().getFactory(classname.class); List lst = factory.createModel(array_list);
ListStore<BeanModel> store = new ListStore<BeanModel>();
store.add(lst);

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("xxx", "xxxx", 100));
columns.add(new ColumnConfig("yyy", "yyyy", 100));
ColumnModel cm = new ColumnModel(columns);

grid = new Grid<BeanModel>(store, cm);



Hope this helps..

sven
7 Jul 2009, 9:55 AM
You can also take a look at the exampes:

http://www.extjs.com/examples/explorer.html

There we populate a grid with a rpcproxy (for example)

Reghin
7 Jul 2009, 10:46 AM
Thank you so much for both examples. I finally managed to populate a combobox. :))

The next step would be to link three comboboxes to each other, so the values available on the third combo depends on the second, and the second depends on the first.

Is there any example on the Explorer??

Hova
13 Aug 2009, 2:39 AM
Thank you so much for both examples. I finally managed to populate a combobox. :))

The next step would be to link three comboboxes to each other, so the values available on the third combo depends on the second, and the second depends on the first.

Is there any example on the Explorer??

i have not come across any examples as of yet but I am employing listeners to change the stores

Reghin
14 Aug 2009, 10:28 AM
Hova, I did it.

I confess due to the lack of documentation, it takes some (lots of) extra time to figure things out, but I finally got things working the way I wanted.

Azadi
14 Aug 2009, 11:20 AM
Hi Sven,

Do you have any example on loading a Grid with multiple-column grouping?

Thanks for your help

Arno.Nyhm
17 Aug 2009, 1:43 AM
Hova, I did it.

I confess due to the lack of documentation, it takes some (lots of) extra time to figure things out, but I finally got things working the way I wanted.

can you pls post some code snippets how you get it working?

Reghin
17 Aug 2009, 5:19 AM
I'll try to post some code in here. As soon as I solve some BigDecimal's problem...

Reghin
17 Aug 2009, 8:40 AM
can you pls post some code snippets how you get it working?

Arno, what code would you like to see? The code to populate the grid or the code to link all combos together?

Arno.Nyhm
19 Aug 2009, 3:59 AM
the linking is interesting. but the best is a complete working example that everyone can copy and paste and its working ;-)

Reghin
21 Aug 2009, 9:33 AM
Here's the whole thing. :D

Sorry if part of the code is in portuguese. I've painted in red the important parts.


package br.com.ierp.gxt.client.modules;

import java.util.List;

import br.com.ierp.gxt.client.desktop.DesktopMenu;
import br.com.ierp.gxt.client.desktop.base.Instantiable;
import br.com.ierp.gxt.client.language.constants.BDIERPConstants;
import br.com.ierp.gxt.client.services.LoginService;
import br.com.ierp.gxt.client.services.LoginServiceAsync;
import br.com.ierp.gxt.entity.Carteira;
import br.com.ierp.gxt.entity.Contrato;
import br.com.ierp.gxt.entity.Empreendimento;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelReader;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.ListLoader;
import com.extjs.gxt.ui.client.data.LoadEvent;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.LoadListener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.StoreEvent;
import com.extjs.gxt.ui.client.store.StoreListener;
import com.extjs.gxt.ui.client.util.IconHelper;
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.ComboBox;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.form.FormPanel.LabelAlign;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class JLoginSelecao extends Window implements Instantiable {

// interfaces para internacionalizacao
private BDIERPConstants constants = GWT.create(BDIERPConstants.class);
//private BDIERPMessages messages = GWT.create(BDIERPMessages.class);

// declarar aqui todos os servicos que vao ser usados na tela
private LoginServiceAsync loginService = GWT.create(LoginService.class);

// componentes da janela
private FormPanel form;
private ComboBox<BeanModel> comboEmpreendimento;
private ComboBox<BeanModel> comboCarteira;
private ComboBox<BeanModel> comboContrato;
private Button selecionar;

// guarda selecao feita no form
private Empreendimento empreendimentoSelecionado;
private Carteira carteiraSelecionada;
private Contrato contratoSelecionado;

// ==========================================================================================================================
public JLoginSelecao() {
createDataStore();
createWindow();
}

// ==========================================================================================================================
private void createDataStore() {
createEmpreendimentoDataStore();
createCarteiraDataStore();
createContratoDataStore();
}

// ==========================================================================================================================
private void createWindow() {
// cria janela e define suas propriedades
setWidth(490);
setHeight(190);
setClosable(false);
setResizable(false);
setFrame(true);
setBorders(false);
setHeading(constants.loginWindowTitle());
setIcon(IconHelper.create("resources/desktop/images/icon_padlock.png"));
setLayout(new FitLayout());

form = new FormPanel();
form.setFrame(false);
form.setBorders(false);
form.setBodyBorder(false);
form.setHeaderVisible(false);
form.setButtonAlign(HorizontalAlignment.CENTER);
form.setAutoWidth(true);
form.setAutoHeight(true);
form.setLabelWidth(100);
form.setFieldWidth(330);
form.setPadding(20);
form.setLabelAlign(LabelAlign.RIGHT);

createEmpreendimentoComboBox();
createCarteiraComboBox();
createContratoComboBox();

createSelecionarButton();

form.add(comboEmpreendimento);
form.add(comboCarteira);
form.add(comboContrato);
form.addButton(selecionar);

add(form);
setFocusWidget(comboEmpreendimento);

// so manda buscar os dados no servidor depois de ter renderizado a janela (e nao na sua criacao)
addListener(Events.Render, new Listener<BaseEvent>() {
@Override
public void handleEvent(BaseEvent be) {
// ja manda buscar os empreendimentos no servidor
// GETS THE DATA FROM THE SERVER RIGHT AWAY, ONCE RENDERED
comboEmpreendimento.doQuery(null, true);
}
});
}

// ==========================================================================================================================
private ListStore<BeanModel> createEmpreendimentoDataStore() {
RpcProxy<List<Empreendimento>> proxy = new RpcProxy<List<Empreendimento>>() {
@Override
public void load(Object loadConfig, AsyncCallback<List<Empreendimento>> callback) {
loginService.listEmpreendimentos(callback);
}
};

ListLoader<ListLoadResult<Empreendimento>> loader = new BaseListLoader<ListLoadResult<Empreendimento>>(proxy, new BeanModelReader());
loader.addLoadListener(new LoadListener() {
@Override
public void loaderLoadException(LoadEvent le) {
super.loaderLoadException(le);
MessageBox.alert(constants.loginAlertTitleError(), le.exception.getMessage(), null);
}
});

ListStore<BeanModel> store = new ListStore<BeanModel>(loader);
store.addStoreListener(new StoreListener<BeanModel>() {
@Override
@SuppressWarnings("unchecked")
public void storeDataChanged(StoreEvent<BeanModel> se) {
super.storeDataChanged(se);
List<BeanModel> beans = (List<BeanModel>) se.getStore().getModels();
// se a store so tiver um registro, seleciona esse unico registro e o seleciona automaticamente na combo
// IF THERE IS ONLY ONE RECORD, SELECTS IT AUTOMAGICALLY
if (beans != null && beans.size() == 1) {
comboEmpreendimento.setValue(beans.get(0));
}
}
});

return store;
}

// ==========================================================================================================================
private ListStore<BeanModel> createCarteiraDataStore() {
RpcProxy<List<Carteira>> proxy = new RpcProxy<List<Carteira>>() {
@Override
public void load(Object loadConfig, AsyncCallback<List<Carteira>> callback) {
if (empreendimentoSelecionado != null)
// DEPENDS ON "EMPREENDIMENTOSELECIONADO" BEING SELECTED FIRST
loginService.listCarteiras(empreendimentoSelecionado, callback);
}
};

ListLoader<ListLoadResult<Carteira>> loader = new BaseListLoader<ListLoadResult<Carteira>>(proxy, new BeanModelReader());
loader.addLoadListener(new LoadListener() {
@Override
public void loaderLoadException(LoadEvent le) {
super.loaderLoadException(le);
MessageBox.alert(constants.loginAlertTitleError(), le.exception.getMessage(), null);
}
});

ListStore<BeanModel> store = new ListStore<BeanModel>(loader);
store.addStoreListener(new StoreListener<BeanModel>() {
@Override
@SuppressWarnings("unchecked")
public void storeDataChanged(StoreEvent<BeanModel> se) {
super.storeDataChanged(se);
List<BeanModel> beans = (List<BeanModel>) se.getStore().getModels();
// se a store so tiver um registro, seleciona esse unico registro e o seleciona automaticamente na combo
if (beans != null && beans.size() == 1) {
comboCarteira.setValue(beans.get(0));
}
}
});

return store;
}

// ==========================================================================================================================
private ListStore<BeanModel> createContratoDataStore() {
RpcProxy<List<Contrato>> proxy = new RpcProxy<List<Contrato>>() {
@Override
public void load(Object loadConfig, AsyncCallback<List<Contrato>> callback) {
if (carteiraSelecionada != null)
loginService.listContratos(carteiraSelecionada, callback);
}
};

ListLoader<ListLoadResult<Contrato>> loader = new BaseListLoader<ListLoadResult<Contrato>>(proxy, new BeanModelReader());
loader.addLoadListener(new LoadListener() {
@Override
public void loaderLoadException(LoadEvent le) {
super.loaderLoadException(le);
MessageBox.alert(constants.loginAlertTitleError(), le.exception.getMessage(), null);
}
});

ListStore<BeanModel> store = new ListStore<BeanModel>(loader);
store.addStoreListener(new StoreListener<BeanModel>() {
@Override
@SuppressWarnings("unchecked")
public void storeDataChanged(StoreEvent<BeanModel> se) {
super.storeDataChanged(se);
List<BeanModel> beans = (List<BeanModel>) se.getStore().getModels();
// se a store so tiver um registro, seleciona esse unico registro e o seleciona automaticamente na combo
if (beans != null && beans.size() == 1) {
comboContrato.setValue(beans.get(0));
}
}
});

return store;
}

// ==========================================================================================================================
private void createEmpreendimentoComboBox() {
comboEmpreendimento = new ComboBox<BeanModel>();
comboEmpreendimento.setFieldLabel(constants.labelEmpreendimento());
//comboEmpreendimento.setEmptyText("Selecione um empreendimento...");
comboEmpreendimento.setDisplayField("nome");
comboEmpreendimento.setWidth(150);
//comboEmpreendimento.setTypeAhead(true);
comboEmpreendimento.setAllowBlank(false);
comboEmpreendimento.setForceSelection(true);
comboEmpreendimento.setTriggerAction(TriggerAction.ALL);
comboEmpreendimento.setStore(createEmpreendimentoDataStore());

comboEmpreendimento.addSelectionChangedListener(new SelectionChangedListener<BeanModel>() {
@Override
public void selectionChanged(SelectionChangedEvent<BeanModel> se) {
// KEEPS WHAT "EMPREENDIMENTO" WAS FIRST SELECTED, WE'LL NEED IT LATER
empreendimentoSelecionado = comboEmpreendimento.getValue().getBean();
carteiraSelecionada = null;
contratoSelecionado = null;

// CLEAR ANY OTHER COMBO THAT DEPENDS ON THIS SELECTION
comboCarteira.clearSelections();
comboContrato.clearSelections();
comboCarteira.setEnabled(true);
comboContrato.setEnabled(false);

// FORCE A NEW QUERY ON THIS CHILD COMBO (WHICH DEPENDS ON THIS VERY SELECTED ITEM
comboCarteira.doQuery(null, true);

selecionar.setEnabled(false);
}
});
}

// ==========================================================================================================================
private void createCarteiraComboBox() {
comboCarteira = new ComboBox<BeanModel>();
comboCarteira.setEnabled(false);
comboCarteira.setFieldLabel(constants.labelCarteira());
//comboCarteira.setEmptyText("Selecione uma carteira...");
comboCarteira.setDisplayField("descricao");
comboCarteira.setWidth(150);
//comboCarteira.setTypeAhead(true);
comboCarteira.setAllowBlank(false);
comboCarteira.setForceSelection(true);
comboCarteira.setTriggerAction(TriggerAction.ALL);
comboCarteira.setStore(createCarteiraDataStore());

comboCarteira.addSelectionChangedListener(new SelectionChangedListener<BeanModel>() {
@Override
public void selectionChanged(SelectionChangedEvent<BeanModel> se) {
carteiraSelecionada = comboCarteira.getValue().getBean();
contratoSelecionado = null;

comboContrato.clearSelections();
comboContrato.doQuery(null, true);
comboContrato.setEnabled(true);

selecionar.setEnabled(false);
}
});
}

// ==========================================================================================================================
private void createContratoComboBox() {
comboContrato = new ComboBox<BeanModel>();
comboContrato.setEnabled(false);
comboContrato.setFieldLabel(constants.loginLabelContrato());
//comboContrato.setEmptyText("Selecione um contrato...");
comboContrato.setDisplayField("descricao");
comboContrato.setWidth(150);
//comboContrato.setTypeAhead(true);
comboContrato.setAllowBlank(false);
comboContrato.setForceSelection(true);
comboContrato.setTriggerAction(TriggerAction.ALL);
comboContrato.setStore(createContratoDataStore());

comboContrato.addSelectionChangedListener(new SelectionChangedListener<BeanModel>() {
@Override
public void selectionChanged(SelectionChangedEvent<BeanModel> se) {
contratoSelecionado = comboContrato.getValue().getBean();
selecionar.setEnabled(true);
}
});
}

// ==========================================================================================================================
private void createSelecionarButton() {
selecionar = new Button(constants.loginButtonSelect());
selecionar.setEnabled(false);
selecionar.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {

AsyncCallback<Boolean> selectCallback = new AsyncCallback<Boolean>() {
@Override
public void onFailure(Throwable caught) {
getBody().setEnabled(true);
MessageBox.alert(constants.loginAlertTitleError(), caught.getMessage(), null);
}
@Override
public void onSuccess(Boolean result) {
setVisible(false);
new DesktopMenu();
}
};

getBody().setEnabled(false);
loginService.selectEmpreendimentoCarteiraContrato(empreendimentoSelecionado, carteiraSelecionada, contratoSelecionado, selectCallback);
}
});
}

}

Hope this helps. :)

Arno.Nyhm
24 Aug 2009, 12:18 AM
thanks for sharing your solution :-)
the red marked details are very helpful