AdapterField Issue

[nyklogistics]

First question, what is the layout I should used to fit the field width in the form layout. I have tried to use FitLayout, but it does not work. And I have tried to use VBoxLayout and HBoxLayout, it does not render the component properly.

And I've tried to set the component width with 100% in a FlowLayout, but it does not fit the field width of the FormPanel too.



private void createForm1() {
FormPanel simple = new FormPanel();
simple.setHeading("Simple Form");
simple.setFrame(true);
simple.setWidth(500);
simple.setFieldWidth(350);
simple.setLabelWidth(150);

TextField<String> firstName = new TextField<String>();
firstName.setValue("first name");
firstName.setWidth("100%");
TextField<String> middleName = new TextField<String>();
middleName.setValue("middle name");
middleName.setWidth("100%");
ComboBox<BaseModelData> lastName= new ComboBox<BaseModelData>();
lastName.setStore(new ListStore<BaseModelData>());
lastName.setWidth("100%");

LayoutContainer w = new LayoutContainer(new FlowLayout());
w.add(firstName, new FlowData(new Margins(0, 0, 5, 0)));
w.add(middleName, new FlowData(new Margins(0, 0, 5, 0)));
w.add(lastName, new FlowData(new Margins(0)));
AdapterField name = new AdapterField(w);
name.setResizeWidget(true);
name.setFieldLabel("Name");
simple.add(name, formData);

TextField<String> email = new TextField<String>();
email.setFieldLabel("Email");
email.setAllowBlank(false);
simple.add(email, formData);

List<Stock> stocks = TestData.getStocks();
Collections.sort(stocks, new Comparator<Stock>() {
public int compare(Stock arg0, Stock arg1) {
return arg0.getName().compareTo(arg1.getName());
}
});

ListStore<Stock> store = new ListStore<Stock>();
store.add(stocks);

ComboBox<Stock> combo = new ComboBox<Stock>();
combo.setFieldLabel("Company");
combo.setDisplayField("name");
combo.setTriggerAction(TriggerAction.ALL);
combo.setStore(store);
simple.add(combo, formData);

DateField date = new DateField();
date.setFieldLabel("Birthday");
simple.add(date, formData);

TimeField time = new TimeField();
time.setFieldLabel("Time");
simple.add(time, formData);

Slider slider = new Slider();
slider.setMinValue(40);
slider.setMaxValue(90);
slider.setValue(60);
slider.setIncrement(1);
slider.setMessage("{0} inches tall");

final SliderField sf = new SliderField(slider);
sf.setFieldLabel("Size");
simple.add(sf, formData);
CheckBox check1 = new CheckBox();
check1.setBoxLabel("Classical");

CheckBox check2 = new CheckBox();
check2.setBoxLabel("Rock");
check2.setValue(true);

CheckBox check3 = new CheckBox();
check3.setBoxLabel("Blue");

CheckBoxGroup checkGroup = new CheckBoxGroup();
checkGroup.setFieldLabel("Music");
checkGroup.add(check1);
checkGroup.add(check2);
checkGroup.add(check3);
simple.add(checkGroup, formData);

Radio radio = new Radio();
radio.setName("radio");
radio.setBoxLabel("Red");
radio.setValue(true);

Radio radio2 = new Radio();
radio2.setName("radio");
radio2.setBoxLabel("Blue");

RadioGroup radioGroup = new RadioGroup("test");
radioGroup.setFieldLabel("Favorite Color");
radioGroup.add(radio);
radioGroup.add(radio2);
simple.add(radioGroup, formData);

TextArea description = new TextArea();
description.setPreventScrollbars(true);
description.setFieldLabel("Description");
simple.add(description, formData);

Button b = new Button("Submit");
simple.addButton(b);
simple.addButton(new Button("Cancel"));

simple.setButtonAlign(HorizontalAlignment.CENTER);

FormButtonBinding binding = new FormButtonBinding(simple);
binding.addButton(b);

vp.add(simple);
}


http://img7.imageshack.us/img7/4873/99333316.png

Besides, please consider the my question in http://extjs.com/forum/showthread.php?t=73340 together which is relevant to the AdapterField.

I cannot see any example of using AdapterField in the demo. I think it is a valuable widget for building a more advanced form.

[sven]

I move this to the help forum as this is not a bug. You cant use width 100% in that way as already said. You could use a rowlayout with a rowdata of 1 for the width for example.

[nyklogistics]

It's fine to use row layout to align the TextField vertically. But it cannot be aligned horizontally.
Please help.



private void createForm1() {
FormPanel simple = new FormPanel();
simple.setHeading("Simple Form");
simple.setFrame(true);
simple.setWidth(500);
simple.setFieldWidth(350);
simple.setLabelWidth(150);

TextField<String> firstName = new TextField<String>();
firstName.setValue("first name");
firstName.setWidth("100%");
TextField<String> middleName = new TextField<String>();
middleName.setValue("middle name");
middleName.setWidth("100%");
ComboBox<BaseModelData> lastName= new ComboBox<BaseModelData>();
lastName.setStore(new ListStore<BaseModelData>());
lastName.setWidth("100%");

LayoutContainer w = new LayoutContainer(new RowLayout(Orientation.HORIZONTAL));
w.add(firstName, new RowData(.3, -1, new Margins(0, 5, 0, 0)));
w.add(middleName, new RowData(.3, -1, new Margins(0, 5, 0, 0)));
w.add(lastName, new RowData(.4, -1, new Margins(0)));
AdapterField name = new AdapterField(w);
name.setResizeWidget(true);
name.setFieldLabel("Name");
simple.add(name, formData);

TextField<String> email = new TextField<String>();
email.setFieldLabel("Email");
email.setAllowBlank(false);
simple.add(email, formData);

List<Stock> stocks = TestData.getStocks();
Collections.sort(stocks, new Comparator<Stock>() {
public int compare(Stock arg0, Stock arg1) {
return arg0.getName().compareTo(arg1.getName());
}
});

ListStore<Stock> store = new ListStore<Stock>();
store.add(stocks);

ComboBox<Stock> combo = new ComboBox<Stock>();
combo.setFieldLabel("Company");
combo.setDisplayField("name");
combo.setTriggerAction(TriggerAction.ALL);
combo.setStore(store);
simple.add(combo, formData);

DateField date = new DateField();
date.setFieldLabel("Birthday");
simple.add(date, formData);

TimeField time = new TimeField();
time.setFieldLabel("Time");
simple.add(time, formData);

Slider slider = new Slider();
slider.setMinValue(40);
slider.setMaxValue(90);
slider.setValue(60);
slider.setIncrement(1);
slider.setMessage("{0} inches tall");

final SliderField sf = new SliderField(slider);
sf.setFieldLabel("Size");
simple.add(sf, formData);
CheckBox check1 = new CheckBox();
check1.setBoxLabel("Classical");

CheckBox check2 = new CheckBox();
check2.setBoxLabel("Rock");
check2.setValue(true);

CheckBox check3 = new CheckBox();
check3.setBoxLabel("Blue");

CheckBoxGroup checkGroup = new CheckBoxGroup();
checkGroup.setFieldLabel("Music");
checkGroup.add(check1);
checkGroup.add(check2);
checkGroup.add(check3);
simple.add(checkGroup, formData);

Radio radio = new Radio();
radio.setName("radio");
radio.setBoxLabel("Red");
radio.setValue(true);

Radio radio2 = new Radio();
radio2.setName("radio");
radio2.setBoxLabel("Blue");

RadioGroup radioGroup = new RadioGroup("test");
radioGroup.setFieldLabel("Favorite Color");
radioGroup.add(radio);
radioGroup.add(radio2);
simple.add(radioGroup, formData);

TextArea description = new TextArea();
description.setPreventScrollbars(true);
description.setFieldLabel("Description");
simple.add(description, formData);

Button b = new Button("Submit");
simple.addButton(b);
simple.addButton(new Button("Cancel"));

simple.setButtonAlign(HorizontalAlignment.CENTER);

FormButtonBinding binding = new FormButtonBinding(simple);
binding.addButton(b);

vp.add(simple);
}

[sven]

In your example you align them vertically or do i understand it wrong?

Well, if oyu want them horizontally you have to give your layoutcontainer a fixed width and height (no percentages, which you shoul never use)

You could also use columnlayout for horizontal alignment. This is also handled by the examples.

[nyklogistics]

Actually, I've asked you about the horizontal layout before (in this thread http://extjs.com/forum/showthread.php?t=73340). I think you have missed out my question.:D

I know the width of the container in the AdapterField by calling simpleForm.getFieldWidth() but I cannot know the exact height. So, how can I set the fixed height to that?

Does the ColumnLayout allow setting the Margin to the component? I cannot find the setter method.

[nyklogistics]

Can you suggest a solution to solve this?

[sven]

You should explain first in detail what you want to do. What are your requirements. If you only want two textfields next to each other you know the height.

[nyklogistics]

I have already said my requirement.

Just like the below figure:
http://img179.imageshack.us/img179/6162/16579502.png

I want to display two (or more) textfield in the same row using AdapterField, where the size of each textfield is controlled by percentage. The total width (including the textfield width and the margin width) should be fit to the field width of the form.

ColumnLayout cannot be used since there is no way to set the margin. And RowLayout cannot be used since I don't know the height of the single row text field. I never use HBoxLayout and VBoxLayout successfully in AdapterField.


Would you like to add some demo on AdapterField? I think it is useful to building advanced forms.

[sven]

You have a coupleof solutions:


Multifield instead of adapterfield what i would suggest
As you know the height you can use HBoxLayout
As you know the height you can use RowLayout
You could use ColumnLayout with a spacer in between (insteaf of margin)

[nyklogistics]

Can I get the height of a textfield which is not added to the formPanel?

[nyklogistics]

There is no method to set the margin in MultiField. And can I set the width of each textfield individually? And the first textfield should have a right margin (5px) and the last textfield should have a margin (0px). How can I achieve this?

[sven]

Spacing between the fields

[nyklogistics]

But how do I fit the field according to the field label? Can I use percentage to set the width of each fields?

http://img188.imageshack.us/img188/9526/45993981.png

[sven]

You need to set resizeFields to true. Than the fields get resized according to the outerpanel.

[nyklogistics]

It is not true.


TextField<String> firstName = new TextField<String>();
firstName.setValue("first name");
TextField<String> middleName = new TextField<String>();
middleName.setValue("middle name");
ComboBox<BaseModelData> lastName = new ComboBox<BaseModelData>();
lastName.setStore(new ListStore<BaseModelData>());

MultiField name = new MultiField("Name", firstName, middleName, lastName);
name.setResizeFields(true);
name.setSpacing(5);

Is it a bug?

And can I set the width to each field individually?

[sven]

No it is not a bug. How are you adding the multifield to the panel?

[nyklogistics]

No it is not a bug. How are you adding the multifield to the panel?

Please check the below code


private void createForm1() {
FormPanel simple = new FormPanel();
simple.setHeading("Simple Form");
simple.setFrame(true);
simple.setWidth(500);
simple.setFieldWidth(350);
simple.setLabelWidth(150);

TextField<String> firstName = new TextField<String>();
firstName.setValue("first name");
TextField<String> middleName = new TextField<String>();
middleName.setValue("middle name");
ComboBox<BaseModelData> lastName = new ComboBox<BaseModelData>();
lastName.setStore(new ListStore<BaseModelData>());

MultiField name = new MultiField("Name", firstName, middleName, lastName);
name.setResizeFields(true);
name.setSpacing(5);
simple.add(name, formData);

TextField<String> email = new TextField<String>();
email.setFieldLabel("Email");
email.setAllowBlank(false);
simple.add(email, formData);

List<Stock> stocks = TestData.getStocks();
Collections.sort(stocks, new Comparator<Stock>() {
public int compare(Stock arg0, Stock arg1) {
return arg0.getName().compareTo(arg1.getName());
}
});

ListStore<Stock> store = new ListStore<Stock>();
store.add(stocks);

ComboBox<Stock> combo = new ComboBox<Stock>();
combo.setFieldLabel("Company");
combo.setDisplayField("name");
combo.setTriggerAction(TriggerAction.ALL);
combo.setStore(store);
simple.add(combo, formData);

DateField date = new DateField();
date.setFieldLabel("Birthday");
simple.add(date, formData);

TimeField time = new TimeField();
time.setFieldLabel("Time");
simple.add(time, formData);

Slider slider = new Slider();
slider.setMinValue(40);
slider.setMaxValue(90);
slider.setValue(60);
slider.setIncrement(1);
slider.setMessage("{0} inches tall");

final SliderField sf = new SliderField(slider);
sf.setFieldLabel("Size");
simple.add(sf, formData);
CheckBox check1 = new CheckBox();
check1.setBoxLabel("Classical");

CheckBox check2 = new CheckBox();
check2.setBoxLabel("Rock");
check2.setValue(true);

CheckBox check3 = new CheckBox();
check3.setBoxLabel("Blue");

CheckBoxGroup checkGroup = new CheckBoxGroup();
checkGroup.setFieldLabel("Music");
checkGroup.add(check1);
checkGroup.add(check2);
checkGroup.add(check3);
simple.add(checkGroup, formData);

Radio radio = new Radio();
radio.setName("radio");
radio.setBoxLabel("Red");
radio.setValue(true);

Radio radio2 = new Radio();
radio2.setName("radio");
radio2.setBoxLabel("Blue");

RadioGroup radioGroup = new RadioGroup("test");
radioGroup.setFieldLabel("Favorite Color");
radioGroup.add(radio);
radioGroup.add(radio2);
simple.add(radioGroup, formData);

TextArea description = new TextArea();
description.setPreventScrollbars(true);
description.setFieldLabel("Description");
simple.add(description, formData);

Button b = new Button("Submit");
simple.addButton(b);
simple.addButton(new Button("Cancel"));

simple.setButtonAlign(HorizontalAlignment.CENTER);

FormButtonBinding binding = new FormButtonBinding(simple);
binding.addButton(b);

vp.add(simple);
}

[nyklogistics]

MultiField only solve the problem that what I added to the FormPanel is "Field". How can I add Button or other Widget?

So, I eventually need AdapterField to achieve this. What we want is just like the FileUploadField where there is a TextField and a Button. But it is difficult for developer to make a Widget like FileUploadField.

[sven]

If you want a button than you really need adapterfield. That is why i asked you for your requirement.

[sven]

Also, you could add a button with an adapterfield to the multifield.

[nyklogistics]

So, would you like to fix the problem which the multifield is not fit according to the FormPanel's field width?

[sven]

There was a little issue. That is already fixed in SVN

[nyklogistics]

I'm using the latest version in SVN (r1619), but it is not fixed.

[sven]

2.0 is now under "releases/2.0".

Trunk is going to be 2.1