ComboBox Help

[abaig]

Hi

I am trying to create a ComboBox with data read through Toplink. I am using a GWT RPC service to create proxy for Toplink class and query database.

I am able to successfully retrieve data from Toplink. But I can't see the countries when combox box is expanded. At the same time, when I type in partial country name, I can see combo box filling in rest of the name. This means data is added to combobox but not rendered property. Also, the trigger icon in combobox is not in line with the text field. I guess I am missing something basic but unable to figure it out. Any help would be really appreciated.

Thanks,
Amjad.

Here is the sample code:

UserRemoteService contains RPC proxy for toplink objects.
Country is dataholder for country data and it extends BaseModelData.

public class UserRPC implements EntryPoint {

private ComboBox<Country> cWidget = new ComboBox<Country>();
private final UserRemoteServiceAsync uService = getUserService();

public void onModuleLoad() {
System.out.println("UserRPC: onModuleLoad");
HorizontalPanel fPanel = new HorizontalPanel();
cWidget.setEmptyText("Select a state...");
cWidget.setDisplayField("name");
cWidget.setBorders(true);
cWidget.setWidth(200);
cWidget.setTypeAhead(true);
cWidget.setTriggerAction(TriggerAction.ALL);
cWidget.setAllowBlank(true);
cWidget.setAutoHeight(true);

//Needed to fill in some dummy value as otherwise I got Assert null error
fillEmptyCombo();

fillCountryCombos();

fPanel.add(cWidget);
RootPanel.get().add(fPanel);

}
private UserRemoteServiceAsync getUserService() {
UserRemoteServiceAsync userService = (UserRemoteServiceAsync) GWT.create(UserRemoteService.class);
ServiceDefTarget endpoint = (ServiceDefTarget) userService;
String moduleRelativeURL = GWT.getModuleBaseURL() + "user";
endpoint.setServiceEntryPoint(moduleRelativeURL);
return userService;
}
private void fillEmptyCombo() {
Country country = new Country();
country.setName(" ");
ListStore<Country> countries= new ListStore<Country>();
countries.add(country);
cWidget.setStore(countries);
}
private void fillCountryCombos() {
ListStore<Country> countries = new ListStore<Country>();
if(uService != null) {
uService.getCountries(new AsyncCallback<List<Country>>() {

public void onFailure(Throwable caught) {
// TODO Auto-generated method stub


}

public void onSuccess(List<Country> result) {
// TODO Auto-generated method stub
ListStore<Country> countries = new ListStore<Country>();
Iterator<Country> iter = result.iterator();
while(iter.hasNext()) {
Country country = iter.next();
country.set("name", country.getName());
country.set("iso", country.getIso());
countries.add(country);
}
cWidget.setStore(countries);
}

});
}
}
}

[ogolushkov]

May be it happens because you create new ListStore<Country>(); in the onSuccess() method.

Try to call store from your cWidget.getStore(); and if it's null than create new store, if not, put new items to this store.

hope it will help.

[abaig]

Thanks ogolushkov (http://extjs.com/forum/member.php?u=56015).

But I won't have the results to display in Combo until onSuccess method is called back.

-Amjad.

[ogolushkov]

But I won't have the results to display in Combo until onSuccess method is called back.

-Amjad.

Well, you call method fillCountryCombos() once before adding cWidget to the fPanel. So, data from server (list of countries) will be putted in the cWidget when onSucces() method will be called. Do you want this data will be loaded before onSucces(); calling?

[abaig]

Well, you call method fillCountryCombos() once before adding cWidget to the fPanel. So, data from server (list of countries) will be putted in the cWidget when onSucces() method will be called. Do you want this data will be loaded before onSucces(); calling?

ogolushkov,

I can do that as well. But main problem is with ComboBox rendering. Though ComboBox fills partial country names as I type (setTypeAhead=true), its showing country list when expanded. Any ideas?

Regards,
Amjad.

[jahman]

http://extjs.com/forum/showthread.php?t=53521&highlight=combobox

There is some similarities between my problem and the above given link, even if there it is been implemented in another way.

Hello everyone,

I have 2 comboxes in a form grid. The first one contains the groups in which items of the second combobox belongs to. I am try to add a listerners which will help me chnage the state of the comboxes. For instance , if I choose an item of the first box, the store of the second box would be changed and reloaded.



function getStore(url, array, results, root, load, range){

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: url}),
reader: new Ext.data.JsonReader({
root: root,
totalProperty: results,
fields: array
})
});

// Hiermit werden die Daten erst aus der Datenbank in die Datastore geladen.
if(load != null || load == true){
if(range >= 0){
ds.load({params:{start:0, limit:range}});
}
else{
ds.load();
}

}


return ds;

}
that is how the store is gotten



listeners : {
select: function(combo, record, index){
var hazardtype = lebensphase.getForm().findField('hazardtype');
var url_new = String.format('http://'+host+'/cake/hazardTypes/getAllHazardTypes/{0}',record.get('id'));
hazardtype.store = getStore(url_new, array4, results, root4, true);
hazardtype.clearValue();
hazardtype.store.reload();
}
}
This works at first use. By second use, the items of the old store are still been rendered, even when the store has removed.

Please I need some help.

[jahman]

Problem solved.

The FAG about comboboxes helped doing. It is not a good idea remove the intial store, but to reload and tell the server to give another set of data.



listeners : {
select: function(combo, record, index){
var hazardtype = lebensphase.getForm().findField('hazardtype');
hazardtype.setValue('');
hazardtype.setDisabled(false);
hazardtype.store.reload({
params: {group: record.get('id')}
});
}
}


serverside: CakePHP




function getAllHazardTypes(){

Configure::write('debug', 0);
$this->layout = "ajax";
$HazardTypeArray = array();
$hazard_group_id = 0;

if(!empty($this->params['form'])){
$hazard_group_id = $this->params['form']['group'];
if($hazard_group_id){
$count = $this->HazardType->findCount(array('hazard_group_id'=>$hazard_group_id));
$HazardTypeA = $this->HazardType->findAll(array('hazard_group_id'=>$hazard_group_id));

$HazardTypeArray = Set::extract($HazardTypeA, '{n}.HazardType');
$this->set('total', $count);
$this->set('hazardtypes', $HazardTypeArray);

}else{
$count = $this->HazardType->findCount();
$HazardTypeA = $this->HazardType->findAll();

$HazardTypeArray = Set::extract($HazardTypeA, '{n}.HazardType');
$this->set('total', $count);
$this->set('hazardtypes', $HazardTypeArray);

}

}
else{
$count = $this->HazardType->findCount();
$HazardTypeA = $this->HazardType->findAll();

$HazardTypeArray = Set::extract($HazardTypeA, '{n}.HazardType');
$this->set('total', $count);
$this->set('hazardtypes', $HazardTypeArray);


}