View Full Version : Sizing a TextField

2 Aug 2010, 5:33 AM

I need a little help setting the width of my form fields (i.e. TextField). I'm using GXT 2.1.1.

Calling setWidth("100%") on the Field will only set the width of the surrounding div, not of the contained form input. That form input gets an absolute width...

I've tried GXT 2.2.0 beta as well, same there.

Any ideas?


2 Aug 2010, 5:39 AM
You should never use percentage sizes. Instead, you should use the layoutsystem of GXT.

Which layout you need to use depends on what you want to do. Can you explain exactly how your app looks like and where you put your textfield?

2 Aug 2010, 6:09 AM
Actually I am using the GXT Layouts, but wongly as it seems.

I need a FormPanel with a slightly more complex layout than what (I assume) is possible with FormLayout. I am building a Form which has the typical vertical layout, but instead of one field it should have more fields per row.

So I built my Form with a TableLayout, where each field should fill their respective cell, therefore the 100% width.

Is there a better way putting multiple fields in a row? MultiField is not an option, since I need to be able to add buttons and labels as well.

Regards, Kai

2 Aug 2010, 6:11 AM
A TableLayout is not sizing its children. You can use an HBoxLayout instead.

2 Aug 2010, 7:01 AM
The labels and first fields in each row still need to be aligned. How can I keep the labels and fields vertically aligned using HBoxLayout? What should I use as surrounding layout?

Regards, Kai

2 Aug 2010, 7:04 AM
What should I use as surrounding layout?

I cannot know this as i dont know your application. You need to draw some picture or describe how your overall application layout looks like.

The labels and first fields in each row still need to be aligned.
You can control aligning with the HBoxLayout, take a look at this example: http://www.sencha.com/examples/explorer.html#hboxlayout

2 Aug 2010, 11:22 PM
Here is a picture to give you an idea of what I'm aming at.


I added the vertical lines to show the fields must align vertically (like the form layout and table layout does). I have multiple fields in a row. I want to be able to give a common field size, but diverge from that in some places. I suppose that when I use an hbox for each row I cannot achieve an equal alignment of each row, or can I?

What layout can I choose?

Regards, Kai

23 Nov 2010, 5:50 PM
You can use a LayoutContainer that uses a TableLayout to achieve this, but each Field component needs to be sub-nested in a LayoutContainer that uses a FormLayout in order for the field label / validation to work correctly. We do this a lot in our code...

Here 'formWidget' is e.g. your TextField and tableContainer is some other LayoutContainer that doesn't use a FormLayout

LayoutContainer adapter = new LayoutContainer();
FormLayout layout = new FormLayout();
FormData formLayoutData = new FormData("-15"); // leave some space for the invalid icon on the right
adapter.add(formWidget, formLayoutData);


This code is from a custom LayoutContainer I wrote that uses a TableLayout to achieve multiple column layout for forms. Seems to work OK....

In a table layout, obviously to achieve what you have you'd have two columns and span them for the third line in your example.