GXT 1.2.3 ColumnLayout Chrome DatePicker bug

[si_gee2000]

It would appear that the DatePicker icon attached to a datefield gets laid out wrongly in this example using % values for the columnlayout in Google Chrome. The icon gets shifted over to the right, under the 3rd column.

If you create a test class as below, and then call show on the window it should reveal the bug!

Windows XP, Chrome 1.0.154.53






import java.util.List;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.binding.FormBinding;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelFactory;
import com.extjs.gxt.ui.client.data.BeanModelLookup;
import com.extjs.gxt.ui.client.data.Model;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.Store;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.DateField;
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.form.FormPanel.LabelAlign;
import com.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.google.gwt.core.client.GWT;

public class InvoiceForm extends Window {

private FormPanel panel;

public InvoiceForm() {
setHeading("Test");

final FormData formData= new FormData("100%");
panel= new FormPanel();
panel.setHeaderVisible(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setLayout(new FlowLayout());

LayoutContainer main = new LayoutContainer();
main.setLayout(new ColumnLayout());

LayoutContainer col1= new LayoutContainer();
FormLayout layout = new FormLayout();
layout.setLabelAlign(LabelAlign.RIGHT);
col1.setLayout(layout);

LayoutContainer col2= new LayoutContainer();
layout = new FormLayout();
layout.setLabelAlign(LabelAlign.RIGHT);
col2.setLayout(layout);

LayoutContainer col3= new LayoutContainer();
layout = new FormLayout();
layout.setLabelAlign(LabelAlign.RIGHT);
col3.setLayout(layout);

TextField<String> reference = new TextField<String>();
reference.setFieldLabel("Reference");
reference.setName("reference");
col1.add(reference, formData);

//fields
DateField date= new DateField();
date.setFieldLabel("Date");
date.setName("date");
col2.add(date, formData);

TextField<String> supplier= new TextField<String>();
supplier.setFieldLabel("Supplier");
supplier.setName("supplier");
col3.add(supplier, formData);

main.add(col1, new ColumnData(0.4));
main.add(col2, new ColumnData(0.3));
main.add(col3, new ColumnData(0.3));
panel.add(main);

setSize("70%", "70%");
setLayout(new FillLayout());
add(panel);

}

}

[fother]

gxt and extjs don't support chrome

[cherbert]

gxt and extjs don't support chrome

Bit of a stupid response especially since elsewhere on these forums the Ext team were asking for feedback regarding Chrome and the ExtJS framework!

Anyway.. I too have noticed this problem and it happens in Safari also - well Safari 4 anyway not tried Safari 3 yet.

[pshah]

I too was having same problem but I got its fix. Go to http://extjs.com/forum/showthread.php?t=45997. I added the css fix posted by postmandev to ext-all.css and it started working fine.
Try this, I am sure, it will help