PDA

View Full Version : Problem with a RadioGroup in ButtonBar



downessw
27 Apr 2010, 5:08 AM
Hello

I have an issue when adding a RadioGroup to a ButtonBar.
The symptom is that if I select a radio within the radio group, all Radio Buttons apart from the first one in the Radio Group disappear. However, this only seems to happen if anything other than the radio part of the button is selected.
For example if I click on the label text of a radio button, or even double click on any part of the button, all radio buttons apart from the first in the group disappear.

Obviously if I directly add the RadioGroup to the panel, I do not see the behaviour.

The problem only seems to exist in IE (7 & 8), Firefox (3.5) is fine. Has anyone experienced anything similar?
Is a RadioGroup a valid thing to add to a ButtonBar?

Before any selection:


20174

After a selection:

20175

Code attached:



import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.FieldEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ButtonBar;
import com.extjs.gxt.ui.client.widget.form.Radio;
import com.extjs.gxt.ui.client.widget.form.RadioGroup;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;

public class TiledPanels extends ContentPanel {

private Radio radio1;
private Radio radio2;
private Radio radio3;
private ContentPanel one;
private ContentPanel two;
private ContentPanel three;

public TiledPanels() {


one = getPanel("display panel one");
two = getPanel("display panel two");
three = getPanel("display panel three");

radio1 = new Radio();
radio1.setBoxLabel("One");
radio1.setValue(true);
radio1.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {
if (radio1.getValue())
{
two.setVisible(false);
three.setVisible(false);
one.setVisible(true);
}
}

});

radio2 = new Radio();
radio2.setBoxLabel("two");
radio2.setValue(false);
radio2.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {
if (radio2.getValue())
{
three.setVisible(false);
one.setVisible(false);
two.setVisible(true);
}
}

});

radio3 = new Radio();
radio3.setBoxLabel("Three");
radio3.setValue(false);
radio3.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {
if (radio3.getValue())
{
two.setVisible(false);
one.setVisible(false);
three.setVisible(true);
}
}

});


RadioGroup group = new RadioGroup();
group.setFieldLabel("Display : ");
group.add(radio1);
group.add(radio2);
group.add(radio3);

ButtonBar buttonbar = new ButtonBar();
buttonbar.add(group);

Button siteButton = new Button("display a grid");

siteButton.addSelectionListener(new SelectionListener<ButtonEvent>() {

public void componentSelected(ButtonEvent ce) {
new CapacityGrid();
}

});

buttonbar.add(siteButton);
buttonbar.setBorders(true);
buttonbar.setSize(300, 35);

add(buttonbar, new RowData(-1, -1, new Margins(5)));
// add(group, new RowData(-1, -1, new Margins(5)));

one.setVisible(true);
two.setVisible(false);
three.setVisible(false);

setLayout(new RowLayout(Orientation.VERTICAL));
add(one, new RowData(-1, -1, new Margins(5)));
add(two, new RowData(-1, -1, new Margins(5)));
add(three, new RowData(-1, -1, new Margins(5)));

}

private ContentPanel getPanel(String title) {

ContentPanel panel = new ContentPanel();
panel.setHeaderVisible(true);
panel.setBodyBorder(true);
panel.setHeading(title);
panel.setWidth(300);
panel.setHeight(300);

return panel;
}

}
If relevant, I just add an instance of the contentpanel directly to the rootpanel.

Any help much appreciated, I could work around this as there is nothing dynamic about what is added, but seems a shame to change my main code just for IE.

andreiastra
27 Apr 2010, 11:18 PM
Could be this one:

http://www.extjs.com/forum/showthread.php?p=440463

downessw
28 Apr 2010, 3:16 AM
Superb, thanks for that, worked a treat