PDA

View Full Version : Radio btns of a radio optn group in a multifield don't line up correctly



nickibckr
6 May 2009, 7:51 AM
In my app, the next button on the window actually performs a post action, and reads in a new XML, (And the fact that the alignment is off, really messes up the second and previous pages).
I got this down to three files, and as basic as possible.
Main App.java:


package demo.app.client;

import com.extjs.gxt.ui.client.Events;
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.data.ModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.IconButton;
import com.extjs.gxt.ui.client.widget.form.AdapterField;
import com.extjs.gxt.ui.client.widget.form.MultiField;
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.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;


/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class App implements EntryPoint {

private ContentPanel panel = new ContentPanel();
Button newWindowBtn = new Button("New Window");
public App(){
newWindowBtn.addListener(Events.OnClick, new Listener<ButtonEvent>() {
public void handleEvent(ButtonEvent arg0) {
newWindow();
}
});
}


public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());
viewport.add(setSpecContainer());
RootPanel.get().add(viewport);
}

public LayoutContainer setSpecContainer(){
LayoutContainer specContainer = new LayoutContainer();
specContainer.setLayout(new BorderLayout());
specContainer.add(mainAreaPanel());
return specContainer;
}

public ContentPanel mainAreaPanel(){
panel.setLayout(new FitLayout());

panel.add(newWindowBtn);
panel.setScrollMode(Scroll.AUTO);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setHeaderVisible(false);

panel.layout();

return panel;

}

public void newWindow(){
Window window = new Window();
window.setModal(true);
NewContentPanel panel = new NewContentPanel();
ClassRegistry.NewContentPanel = panel;
panel.add(addFormContent());
window.add(panel);
window.show();
}

public void refreshPanel(){
ContentPanel panel = ClassRegistry.NewContentPanel;
panel.removeAll();
panel.add(addFormContent());
panel.layout();

}

public LayoutContainer addFormContent(){
LayoutContainer main = new LayoutContainer();
//hardcoded a number of fields for this demo;
for (int i = 0; i < 3; i++) {
int dataInt = 0;
ListStore<ModelData> comboStore = new ListStore<ModelData>();
String displayValue = null;
Long totalCount = Long.valueOf(7);
MultiField multiField = null;
//also hardcoded a number of options for this demo
for (int j = 0; j < 5; j++) {
BaseModelData d = new BaseModelData();
d.set("id", new Integer(dataInt));
d.set("display", dataInt );
d.set("imageURL", "");
d.set("imageHeight", "50");
d.set("imageWidth", "50");
//comboStore.insert(d, dataInt);
comboStore.add(d);
comboStore.commitChanges();
dataInt++;
}

displayValue = (String) "Field Number: " + i;
//in the real app, a help link is available, didn't bother here, but kept it a multifield.
IconButton helpBtn = new IconButton();
helpBtn.setBorders(false);
helpBtn.setStyleAttribute("backgroundImage", "none");
helpBtn.setStyleName("icon-help");
AdapterField helpAdapter = new AdapterField(helpBtn);
helpAdapter.setHideLabel(true);

//if there are no items in the comboStore, then this is a text field
if (comboStore.getCount()==0){

}else{
//check to see if this is radio btns or DD
if (comboStore.getCount() < totalCount.intValue()){
RadioGroup group = new RadioGroup("xmainput_" + i);
for(int j = 0; j < comboStore.getCount(); j++){
ModelData temp = comboStore.getAt(j);
Radio radio1 = new Radio();
//radio1.setName(temp.get("display").toString());
radio1.setBoxLabel(temp.get("display").toString());
radio1.setValueAttribute(temp.get("display").toString());
group.add(radio1);
}

multiField = new MultiField(displayValue, group, helpAdapter);
}
}
multiField.setSpacing(5);
main.add(multiField, new FormData("70%"));
}

return main;
}

}

The content panel:

package demo.app.client;

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;

public class NewContentPanel extends FormPanel {
Button nextBtn = new Button("Next");

public NewContentPanel() {
nextBtn.addListener(Events.OnClick, new Listener<ButtonEvent>() {
public void handleEvent(ButtonEvent arg0) {
App app = new App();
app.refreshPanel();
}
});

addButton(nextBtn);
}

}

And, the registry I use to access static classes easily:

package demo.app.client;


final public class ClassRegistry {
public static NewContentPanel NewContentPanel = new NewContentPanel();
}



Now, when you click on the New window btn, everything looks correct.
But, when you click the "Next" btn on that window the radio fields alignment is off.
When you click the border of the new window, the fields will move and the alignment is corrected.

I am using GXT 1.2.4 (this did not happen in 1.2.3, but we need to upgrade due to some other fixes in 1.2.4)

I will attach Screen Shots
file:///D:/DOCUME%7E1/nbecker/LOCALS%7E1/Temp/moz-screenshot.jpgfile:///D:/DOCUME%7E1/nbecker/LOCALS%7E1/Temp/moz-screenshot-1.jpg

nickibckr
6 May 2009, 10:32 AM
See attached for the screen shots.
SS1 is what the original load of the page looks like,
SS2 is once you click the "next" btn.

If I click on the border of the pop up window (in SS2), the fields will align correctly again.