[CLOSED] layout issue when add a FileUploadField in HorizontalPanel

[fother]

see the image in attachment.

	public void onModuleLoad() {

		final FormPanel form = new FormPanel();
		form.setAction("Example");
		form.setMethod(Method.POST);
		form.setEncoding(Encoding.URLENCODED);

		HorizontalPanel panel1 = new HorizontalPanel();
		panel1.add(new TextField<String>());
		panel1.add(new Text("Text 1"));
		panel1.add(new Text("Text 2"));

		HorizontalPanel panel2 = new HorizontalPanel();
		panel2.add(new FileUploadField());
		panel2.add(new Text("Text 1"));
		panel2.add(new Text("Text 2"));

		HorizontalPanel panel3 = new HorizontalPanel();
		panel3.add(new TextField<String>());
		panel3.add(new Text("Text 1"));
		panel3.add(new Text("Text 2"));

		FieldSet fieldSet = new FieldSet();
		fieldSet.setHeading("FieldSet");
		fieldSet.add(panel1);
		fieldSet.add(panel2);
		fieldSet.add(panel3);

		form.add(fieldSet);

		RootPanel.get().add(form);
	}

[fother]

If I use com.google.gwt.user.client.ui.FileUpload work fine

[sven]

Fixed in SVN.

[fother]

now test with this... click in show button.. and you will see the problem.. the button browser of file upload don't appear for the user change the file

GXT: 1.2.2
GWT: 1.5.3
Firefox: 3.0.5

import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.HorizontalPanel;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.extjs.gxt.ui.client.widget.form.FileUploadField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class App implements EntryPoint {

	public void onModuleLoad() {

		HorizontalPanel hp = new HorizontalPanel();

		final FileUploadField upload = new FileUploadField();

		final Button clickButton = new Button("Click");
		clickButton.addSelectionListener(new SelectionListener<ComponentEvent>() {

			@Override
			public void componentSelected(ComponentEvent ce) {
				MessageBox.alert(null, "click", null);
			}
		});

		final Button hideButton = new Button("hide");
		final Button showButton = new Button("show");

		showButton.setStyleAttribute("paddingLeft", "20px");
		showButton.addSelectionListener(new SelectionListener<ComponentEvent>() {

			@Override
			public void componentSelected(ComponentEvent ce) {

				clickButton.hide();
				showButton.hide();

				hideButton.show();

				upload.show();
			}
		});

		hideButton.setStyleAttribute("paddingLeft", "20px");
		hideButton.addSelectionListener(new SelectionListener<ComponentEvent>() {

			@Override
			public void componentSelected(ComponentEvent ce) {

				clickButton.show();
				showButton.show();

				hideButton.hide();

				upload.hide();
			}
		});

		hp.add(upload);
		hp.add(showButton);
		hp.add(hideButton);
		hp.add(clickButton);

		hideButton.hide();
		upload.hide();

		FieldSet fieldSet = new FieldSet();
		fieldSet.add(new Text("Text would be display on top"));
		fieldSet.add(hp);

		FormPanel form = new FormPanel();
		form.add(fieldSet);

		RootPanel.get().add(form);

	}
}

[sven]

TableLayout is the wrong layout if you need widgets to resize.

For your example you would need to hide the uploadfield after the panel was rendered.

[fother]

you is the the html, css and js machine kkkk what you know all this? thanks

[sven]

showButton.addSelectionListener(new SelectionListener<ComponentEvent>() {

        @Override
        public void componentSelected(ComponentEvent ce) {

            clickButton.hide();
            showButton.hide();

            hideButton.show();

            upload.show();
            upload.setWidth(150);
        }
    });

This also works.

[fother]

this soluction is better than other... but why I need set the width?

[fother]

tested on: vista 64bits, hosted mode, gwt: 1.5.3, gxt 1.2.3

	public void onModuleLoad() {

		HorizontalPanel hp = new HorizontalPanel();

		final FileUploadField upload = new FileUploadField();
		upload.setWidth(150);

		final Button clickButton = new Button("Click");
		clickButton.addSelectionListener(new SelectionListener<ComponentEvent>() {

			@Override
			public void componentSelected(ComponentEvent ce) {
				MessageBox.alert(null, "click", null);
			}
		});

		final Button hideButton = new Button("hide");
		final Button showButton = new Button("show");

		showButton.setStyleAttribute("paddingLeft", "20px");
		showButton.addSelectionListener(new SelectionListener<ComponentEvent>() {

			@Override
			public void componentSelected(ComponentEvent ce) {

				clickButton.hide();
				showButton.hide();

				hideButton.show();

				upload.show();
				upload.setWidth(150);
			}
		});

		hideButton.setStyleAttribute("paddingLeft", "20px");
		hideButton.addSelectionListener(new SelectionListener<ComponentEvent>() {

			@Override
			public void componentSelected(ComponentEvent ce) {

				clickButton.show();
				showButton.show();

				hideButton.hide();

				upload.hide();
			}
		});

		hp.add(upload);
		hp.add(showButton);
		hp.add(hideButton);
		hp.add(clickButton);

		hideButton.hide();
		upload.hide();

		FieldSet fieldSet = new FieldSet();
		fieldSet.add(new Text("Text would be display on top"));
		fieldSet.add(hp);

		FormPanel form = new FormPanel();
		form.add(fieldSet);

		RootPanel.get().add(form);

	}

exception

[ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (Error): Argumento inválido.
 number: -2147024809
 description: Argumento inválido.
	at com.google.gwt.dom.client.Node$.removeChild$(Native Method)
	at com.extjs.gxt.ui.client.widget.form.FormPanel.onDetach(FormPanel.java:448)
	at com.google.gwt.user.client.ui.Panel.doDetachChildren(Panel.java:174)
	at com.google.gwt.user.client.ui.Widget.onDetach(Widget.java:146)
	at com.google.gwt.user.client.ui.RootPanel.detachWidgets(RootPanel.java:194)
	at com.google.gwt.user.client.ui.RootPanel$1.onWindowClosed(RootPanel.java:221)
	at com.google.gwt.user.client.Window.fireClosedImpl(Window.java:465)
	at com.google.gwt.user.client.Window.fireClosedAndCatch(Window.java:456)
	at com.google.gwt.user.client.Window.onClosed(Window.java:430)

[fother]

if I compile and test.. only in IE don't work.. firefox, safari and chrome work fine