PDA

View Full Version : [CLOSED] ComboBox in Dialog Problem



chicagoarchitect
26 Jun 2008, 6:53 AM
I added a FormPanel to my Dialog. And it contains a ComboBox. The list gets populate properly, however, the values are not displayed. I can seem to mouse over each row in the combobox. Any ideas?

Using GWT1.5rc1 + gxt-rc1

Here is the code (screenshot attached):



final Dialog addUpdate = new Dialog();
addUpdate.setHeading("Add/Update");
addUpdate.setButtons(Dialog.YESNO);
addUpdate.setLayout(new FlowLayout());
addUpdate.setScrollMode(Scroll.AUTO);
addUpdate.setHideOnButtonClick(true);
addUpdate.setModal(true);

FormPanel form = new FormPanel();
form.setButtonAlign(HorizontalAlignment.CENTER);
form.setWidth(400);
form.setAutoHeight(true);
form.setBodyBorder(false);
form.setBodyStyle("background: none");
form.setHeaderVisible(false);
form.setFrame(true);
form.setInsetBorder(false);
form.setScrollMode(Scroll.AUTO);
form.setFieldWidth(100);
form.setLabelWidth(100);

TextField rateId = new TextField();
rateId.setFieldLabel("Rate Id");
rateId.setAllowBlank(false);
form.add(rateId);

TextField description = new TextField();
description.setFieldLabel("Description");
description.setAllowBlank(false);
form.add(description);

ComboBox<UnitVO> unitListBox = new ComboBox<UnitVO>();
unitListBox.setStore(unitStore);
unitListBox.setDisplayField("description");
unitListBox.setWidth(150);
unitListBox.setFieldLabel("Units");
unitListBox.setAutoHeight(true);
form.add(unitListBox);

addUpdate.add(form);
addUpdate.show();

darrellmeyer
26 Jun 2008, 8:05 AM
Is the Dialog relevant? or do you get the same issue without? Does you model objects have a "description" property. You can use Firebug for Firefox to inspect the elements to confirm no data in the list.

chicagoarchitect
26 Jun 2008, 8:59 AM
Darrell,

Yep, I'm stepping through it in Eclipse. The ListStore gets populated correctly, and there "description" property is set correctly. This is when I inspect the built-up unitListBox all the way thru the addUpdate.show(). In firebug, however, I do see something like this:


<div style="margin: 0pt; overflow: auto; display: none; position: relative;" id="my-133" class="x-combo-list x-border">
<div style="border: medium none ; overflow: hidden; background-color: white;" id="my-134" class="x-view">
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
<div class="x-combo-list-item" id=""/>
</div>
</div>
The other combo box divs in the dom show up as:


<div class="x-combo-list-item" id="">SomeListItem</div>
Thanks!

darrellmeyer
26 Jun 2008, 1:29 PM
I am a little unclear whether you still have an issue. If you do, please post some test code that demonstrates the problem you are seeing.

chicagoarchitect
26 Jun 2008, 3:42 PM
Sorry, I should've clarified. When I said "other combo box divs", I meant ComboBox's that are on a FormPanel outside of a dialog. Those work. And I can see the list values in the DOM.

However, for CombBox's on a FormPanel in a Dialog, the ComboBox renders on the screen without the values as you see from the attachment (post #1), and this is reflected in the DOM, the values are blank (post #3).

Post#1 = Code for Post#3

So I guess the issue here is, having a ComboBox in a FormPanel in a Dialog does not work...unless I'm missing something.

darrellmeyer
27 Jun 2008, 6:41 AM
I tested the scenario and did not have any problems with the text of the items. However, there was a z-index bug, where the whole list was behind the window. That bug has been fixed. I would guess that the problem is with your data and not the dialog.

If you are still having problems, post your code in the format (http://extjs.com/forum/showthread.php?t=33778), it must be complete and executable.

chicagoarchitect
28 Jun 2008, 11:31 AM
Here you go. Also attached screen for this code.



package com.tiffiny.test.gwt.client;

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

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
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.TextField;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

public class ComboBoxDialog extends LayoutContainer implements EntryPoint {

public void onModuleLoad() {
RootPanel.get().add(this);
}

@Override
protected void onRender(Element parent, int index) {
// TODO Auto-generated method stub
super.onRender(parent, index);


final Dialog addUpdate = new Dialog();
final ComboBox<UnitVO> unitListBox;

//Simulate result from callback
//--BEGIN simulated data--
List<UnitVO> result = new ArrayList<UnitVO>();
UnitVO unitItem;
for(int i = 0; i < 10; i++){
unitItem = new UnitVO();
unitItem.setCode("Code " + i);
unitItem.setDescription("Description " + i);
unitItem.setUnitId(i);
result.add(unitItem);
}
//--END simualted data--

ListStore<UnitVO> unitStore = new ListStore<UnitVO>();
unitStore.add(result);
unitListBox = new ComboBox<UnitVO>();
unitListBox.setStore(unitStore);
unitListBox.setDisplayField("description");
unitListBox.setWidth(150);
unitListBox.setFieldLabel("Units");
unitListBox.setAutoHeight(true);

addUpdate.setHeading("Add/Update");
addUpdate.setButtons(Dialog.YESNO);
addUpdate.setLayout(new FlowLayout());
addUpdate.setScrollMode(Scroll.AUTO);
addUpdate.setHideOnButtonClick(true);
addUpdate.setModal(true);
addUpdate.setLayoutOnChange(true);

FormPanel form = new FormPanel();
form.setButtonAlign(HorizontalAlignment.CENTER);
form.setWidth(400);
form.setAutoHeight(true);
form.setBodyBorder(false);
form.setBodyStyle("background: none");
form.setHeaderVisible(false);
form.setFrame(true);
form.setInsetBorder(false);
form.setScrollMode(Scroll.AUTO);
form.setFieldWidth(100);
form.setLabelWidth(100);

TextField description = new TextField();
description.setFieldLabel("Description");
description.setAllowBlank(false);
form.add(description);

form.add(unitListBox);

TextField rate = new TextField();
rate.setFieldLabel("Rate Amount");
rate.setAllowBlank(false);
form.add(rate);

addUpdate.add(form);
addUpdate.show();

}

public class UnitVO extends BaseModelData{

/**
*
*/
private static final long serialVersionUID = -445388639894779629L;
private Integer unitId;
private String description = "";
private String code = "";

public Integer getUnitId() {
return unitId;
}

public void setUnitId(Integer unitId) {
this.unitId = unitId;
}

public String getDescription() {
return description;
}

public void setDescription(String description) {
this.description = description;
}

public String getCode() {
return code;
}

public void setCode(String code) {
this.code = code;
}

}
}

darrellmeyer
29 Jun 2008, 8:17 PM
The problem is with UnitVO. GXT does not use the getters when obtaining data from the model. It uses the get method passing in the property name. So in the case it calls

unitVo.get("description");The methods should look like this:


public String getDescription() {
return get("description");
}

public void setDescription(String description) {
set("description", description);
}

chicagoarchitect
29 Jun 2008, 9:05 PM
Thanks Darrell!!!

You're a superhero. :)