PDA

View Full Version : [FIXED] Checkbox fields display problem



MrExt
21 May 2009, 8:26 AM
In HostedMode or IE7 (FF3 sometimes), checkboxes disappear when resizing.

I attach a simple testcase.



import com.extjs.gxt.ui.client.widget.form.CheckBox;
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.FormLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
public class TestCase implements EntryPoint
{
public void onModuleLoad()
{
FormPanel panel = new FormPanel();
panel.setAutoWidth(true);

TextField<String> name = new TextField<String>();
name.setName("name");
name.setFieldLabel("name");
CheckBox check = new CheckBox();
check.setName("check");
check.setFieldLabel("check");
FormLayout formLayout = new FormLayout();
panel.add(name);
panel.add(check);
panel.setLayout(formLayout);
RootPanel.get().add(panel);
panel.layout();
}
}

MrExt
9 Jun 2009, 4:29 AM
With last revision it looks solved

sven
9 Jun 2009, 4:30 AM
Great, I will mark this as FNR than.

MrExt
12 Jun 2009, 8:51 AM
Sorry, in other parts of our app the error is present.
The testcase is valid yet.

Thank you for your great support.

cri1258
29 Jun 2009, 1:36 PM
This bug is still present in RC1. Will it be fixed in the final release? Thanks -Chuck

sven
29 Jun 2009, 1:40 PM
Can you please provide some other testcase for this? I cant reproduce this with the first one.

Also note that the above code is not resizing the fields. So at some time the checkbox will be hidden. The field will also be invisible if you decrease the width too much. To avoid this you ahve to use a viewport with fitlayout. You also have to add the fields with a formdata of 100%. So the fields will resize when you resize the browser.

MrExt
30 Jun 2009, 3:29 AM
In real application I use viewport and fit layout. With the test case provided only by forcing a resize by moving one pixel the window size (first re-layout()) the checkboxes disapear but not the other field.

Also, I'm not trying to resize fields. I use fields with fixed size but in a window resizable

sven
30 Jun 2009, 3:32 AM
Can you please provide another testcase for this? With the above one we are unable to reproduce the issue.

lichnost
21 Jul 2009, 11:11 PM
Wrong position of CheckBox after window maximise->restore. Bug appears in Hosted mode and in IE7 with GXT2.0



public void onModuleLoad() {
GXT.hideLoadingPanel("loading");

final Window window = new Window();
window.setHeading("Example");
window.setLayout(new FitLayout());
window.setFrame(true);
window.setPlain(true);
window.setMinWidth(100);
window.setMinHeight(50);
window.setMaximizable(true);
window.setButtonAlign(HorizontalAlignment.CENTER);
window.setStyleAttribute("padding", "5px");

FormPanel formPanel = new FormPanel();
formPanel.setHeaderVisible(false);
formPanel.setButtonAlign(HorizontalAlignment.CENTER);
formPanel.setAutoHeight(true);

TextField<String> field = new TextField<String>();
field.setFieldLabel("TextField 1");
field.setWidth(1);
field.setValue("value 1");
field.setName("txt1");
formPanel.add(field, new FormData("95%"));

CheckBox check = new CheckBox();
check.setFieldLabel("CheckBox");
check.setWidth(1);
check.setValue(Boolean.FALSE);
check.setName("chk2");
formPanel.add(check, new FormData("95%"));

field = new TextField<String>();
field.setFieldLabel("TextField 2");
field.setWidth(1);
field.setValue("value 2");
field.setName("txt2");
formPanel.add(field, new FormData("95%"));

formPanel.addButton(new Button("Close window",
new SelectionListener<ButtonEvent>(){

@Override
public void componentSelected(ButtonEvent ce) {
window.hide();
}

}));

window.add(formPanel);
window.show();
}

leafoxa
24 Jul 2009, 5:24 AM
Try to collapse fields set. Result - upper checkbox disappear. GXT version 2.0.1, hosted mode, IE7 and FF3



Window window = new Window();
window.setHeading("Example");
window.setWidth(400);
window.setHeight(200);
window.setScrollMode(Scroll.AUTO);
FormPanel formPanel = new FormPanel();
formPanel.setHeaderVisible(false);
formPanel.setCollapsible(false);

CheckBox check = new CheckBox();
check.setFieldLabel("CheckBox");

formPanel.add(check);

FieldSet fset = new FieldSet();
fset.setExpanded(true);
fset.setCollapsible(true);
for(int i = 0; i < 10; i++){
TextField<String> field = new TextField<String>();
field.setFieldLabel("Field " + i);
field.setValue("Text " + i);
fset.add(field);
}
AdapterField afield = new AdapterField(fset);
afield.setFieldLabel("Fields");
formPanel.add(afield);
window.add(formPanel);
window.show();

sven
24 Jul 2009, 5:35 AM
This is more an issue in IE. You can repaint the component after expand/collapse with
checkbox.el().repaint()

Colin Alworth
24 Jul 2009, 12:22 PM
Is there a good rule of thumb for when it is necessary to call repaint? and is there any way that the call can be pulled into GXT itself using some <replace-with> magic so we dont muck up ff, opera, chrome, and safari implementations with this 'hey browser, do as you are told' reminder?

I am encountering the issue on page load for normally visible checkboxes, in dialog boxes, and in tab panels - many many places to scatter the arcane repaint() call.



On a completely different note, why is the GXT checkbox field drawn differently than the checkboxes in grids or trees, and the checkbox field found in Ext?

sven
24 Jul 2009, 12:26 PM
What do you mean with drawn differently? Field checkboxes are real once. In the checkboxcolumn and in the tree it is an image.

Colin Alworth
24 Jul 2009, 12:39 PM
I could be wrong, but I thought that Ext checkbox fields were drawn with images before - http://extjs.com/deploy/dev/examples/samples.html#sample-9 shows "Checkbox/Radio Groups" with images, while going to the sample shows the fields themselves as you say.


What about abstracting up the repaint call, or at least some rules of thumb so that we have some best practices for using checkboxes in IE?

sven
24 Jul 2009, 12:41 PM
The there is almost no way to make this automatic. It can happen anywhere. I will look into this again. The element isthere, it is on the correct position, it is just not shown by ie.

sven
24 Jul 2009, 12:58 PM
Ok, found a little workaround for checkboxes. It is in SVN. please validate.

troyg
3 Aug 2009, 5:41 PM
Hi,

This looks very similar to a problem I'm having, where check boxes disappear or aren't rendered at all. They are in a FieldSet that uses a FormLayout. Changing the layout or the container works around the problem. In IE7, the checkboxes are initially invisible, but collapsing and expanding the field set causes them to be rendered correctly. However, the next mouse move makes them disappear again. In Firefox, they are rendered correctly all the time.

I've checked out from svn since your last post, sven, and didn't see a change in behaviour.

Here's some minimal source code:

public class Fred implements EntryPoint {
public void onModuleLoad() {
FieldSet fs = new FieldSet();
Layout layout = new FormLayout();
fs.setLayout( layout );
CheckBox checkBox = new CheckBox();
fs.setHeading( "FieldSet" );
fs.setCollapsible( true );
checkBox.setFieldLabel( "Checkbox" );
checkBox.setName( "legends" );
fs.add( checkBox );
RootPanel.get("nameFieldContainer").add(fs);
}
}

Cheers.

sven
4 Aug 2009, 1:09 AM
Thats fixed in SVN