PDA

View Full Version : Can someone please help me with some binding issues that I am having?



gbougiakas
17 Dec 2009, 6:16 AM
Dear all,

I am new to GXT and no matter how hard I searched and no matter how many examples I read from the showcase I still can't do a relatively simple thing.

Let's say we have 2 tables. City and Country.
Table City contains a City.City_ID, City.Name and City.Country_ID fields.
Table Country contains Country.Country_ID and Country.Name fields.

I create an editable grid according to this example http://www.extjs.com/explorer/#editablegrid and all the details are successfully displayed.

However I need to populate the combo box with a list of Countries that come from a RPC (as the cities do). I managed to do that as well.

What I am having trouble doing is BIND somehow the value of the countries combo box (binded to Country Datasource) to the value City.Country_ID that exists in the City Datasource so that when the grid is rendered then the correct country will be displayed in the combo box for every city line.

In the attached screenshot the grid is populated the combo box is populated but the selected value for every row is not set...

http://img27.imageshack.us/img27/2901/capturezxz.png

Please please help me I am exhausted and desperate!


package org.unipi.pmsdtps.eprescribe.client.gui;

import java.util.ArrayList;
import java.util.List;

import org.unipi.pmsdtps.eprescribe.client.MainServiceAsync;
import org.unipi.pmsdtps.eprescribe.client.bo.CityClient;
import org.unipi.pmsdtps.eprescribe.client.bo.CountryClient;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.TabItem;
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.TextField;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
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.RowEditor;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class CityGUI extends TabItem {

MainServiceAsync mainServiceAsync;
ListStore<CityClient> citiesListStore = new ListStore<CityClient>();
ListStore<CountryClient> countriesListStore = new ListStore<CountryClient>();
ComboBox<CountryClient> countriesCombo = new ComboBox<CountryClient>();
Grid<CityClient> grid;

public ListStore<CityClient> getCitiesListStore() {
return citiesListStore;
}

public void setCitiesListStore(ListStore<CityClient> citiesListStore) {
this.citiesListStore = citiesListStore;
}

public ListStore<CountryClient> getCountriesListStore() {
return countriesListStore;
}

public void setCountriesListStore(
ListStore<CountryClient> countriesListStore) {
this.countriesListStore = countriesListStore;
}

public CityGUI(MainServiceAsync mainServiceAsync) {
this.mainServiceAsync = mainServiceAsync;
mainServiceAsync.getCities(getCitiesCallBack);
mainServiceAsync.getCountries(getCountriesCallBack);
}

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
setLayout(new FlowLayout(10));

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();



// City ID START
ColumnConfig column = new ColumnConfig();
column.setId("city_id");
column.setHeader("City ID");
column.setWidth(0);
column.setHidden(true);

TextField<String> countryIdText = new TextField<String>();
countryIdText.setAllowBlank(false);
column.setEditor(new CellEditor(countryIdText));
configs.add(column);
// City ID END

// City Name START
column = new ColumnConfig();
column.setId("name");
column.setHeader("Name");
column.setWidth(GuiConstants.GRID_COLUMN_WIDTH_MEDIUM);

TextField<String> nameText = new TextField<String>();
nameText.setAllowBlank(false);
column.setEditor(new CellEditor(nameText));
configs.add(column);
// City Name END

// ComboBox START
countriesCombo.setEmptyText("Select a country...");
countriesCombo.setDisplayField("name");
countriesCombo.setTemplate(getTemplate());
countriesCombo.setWidth(GuiConstants.COMBOBOX_WIDTH_MEDIUM);
countriesCombo.setStore(countriesListStore);
countriesCombo.setForceSelection(true);
countriesCombo.setTypeAhead(true);
countriesCombo.setTriggerAction(TriggerAction.ALL);

CellEditor countryCellEditor = new CellEditor(countriesCombo) {
@Override
public Object preProcessValue(Object value) {
if (value == null) {
return value;
} else {
return countriesCombo.getStore().getModels();
}
}

@Override
public Object postProcessValue(Object value) {
if (value == null) {
return value;
}
return ((ModelData) value).get("name");
}
};
// ComboBox END


// ComboBox Column START
column = new ColumnConfig();
column.setId("country_name");
column.setHeader("Country");
column.setWidth(GuiConstants.GRID_COLUMN_WIDTH_SMALL);
column.setEditor(countryCellEditor);
configs.add(column);

// ComboBox Column END

ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
// cp.setIcon(Resources.ICONS.table());
//cp.setHeading("Cities");
//cp.setFrame(true);
cp.setSize(GuiConstants.TAB_ITEM_WIDTH, GuiConstants.TAB_ITEM_HEIGHT);
cp.setLayout(new FitLayout());

final RowEditor<CityClient> re = new RowEditor<CityClient>();
grid = new Grid<CityClient>(citiesListStore, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
// grid.addPlugin(checkColumn);
grid.addPlugin(re);
cp.add(grid);


ToolBar toolBar = new ToolBar();
Button add = new Button("Add City");
add.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
CityClient CityClient = new CityClient();
CityClient.setName("New City");

re.stopEditing(false);
citiesListStore.insert(CityClient, 0);
re.startEditing(citiesListStore.indexOf(CityClient), true);
}

});
toolBar.add(add);
cp.setTopComponent(toolBar);
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.addButton(new Button("Reset", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
citiesListStore.rejectChanges();
}
}));

cp.addButton(new Button("Save", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
citiesListStore.commitChanges();
}
}));

add(cp);
}

private native String getTemplate() /*-{
return [
'<tpl for=".">',
'<div class="x-combo-list-item" qtip="{code}" qtitle="Country Code">{name}</div>',
'</tpl>'
].join("");
}-*/;

@SuppressWarnings("unchecked")
AsyncCallback<List<CityClient>> getCitiesCallBack = new AsyncCallback() {
public void onSuccess(Object object) {
List citiesList = (List) object;
getCitiesListStore().add(citiesList);
}

public void onFailure(Throwable e) {
e.printStackTrace();
}
};

@SuppressWarnings("unchecked")
AsyncCallback<List<CountryClient>> getCountriesCallBack = new AsyncCallback() {
public void onSuccess(Object object) {
List countriesList = (List) object;
getCountriesListStore().add(countriesList);
}

public void onFailure(Throwable e) {
e.printStackTrace();
}
};

}

micgala
17 Dec 2009, 8:05 AM
Try this...

Change:



column = new ColumnConfig();
column.setId("country_name");
column.setHeader("Country");


To:



column = new ColumnConfig();
column.setId("country_id");
column.setHeader("Country");


But not sure... actually, the id should be same name of your country id property in CityClient.java

Hope this helps you.

Regards,
Michel.

JEASIASINGUTT
18 Dec 2009, 2:07 AM
If you add Fightclub360 to your friends list mate it will have all the members hope this helps .....feel free to chuck a FR this way and i can talk you through anything

cheers

gbougiakas
18 Dec 2009, 9:06 AM
If you add Fightclub360 to your friends list mate it will have all the members hope this helps .....feel free to chuck a FR this way and i can talk you through anything

cheers

I did not understand a single word of what you just said :(

micgala
18 Dec 2009, 9:08 AM
Don't worry... that is a spam message... should be deleted soon.

Have you tried my suggestion?

gbougiakas
18 Dec 2009, 9:15 AM
Try this...

Change:



column = new ColumnConfig();
column.setId("country_name");
column.setHeader("Country");
To:



column = new ColumnConfig();
column.setId("country_id");
column.setHeader("Country");
But not sure... actually, the id should be same name of your country id property in CityClient.java

Hope this helps you.

Regards,
Michel.


Thank you for your answer. I had tried that but if I set this column.setId("country_id"); it will bind it to the City datastore and hence only display they numeric ID and not the ComboBox...