com.smartgwt.client.docs
Interface FormLayout

public interface FormLayout

Form Layout

FormItem Placement in Columns and Rows

With the default tabular layout mechanism, items are laid out in rows from left to right until the number of columns, specified by form.numCols, is filled, then a new row is begun. Flags on FormItems, including startRow, endRow, colSpan and rowSpan, control row and column placement and spanning.

Note that the most common form items (TextItem, SelectItem, etc) take up two columns by default: one for the form control itself, and one for it's title. The default setting of form.numCols:2 will result in one TextItem or SelectItem per row.

Note also that ButtonItems have both startRow:true and endRow:true by default. You must set startRow and/or endRow to false on a ButtonItem in order to place a button in the same row as any other item.

The log category "tablePlacement" can be enabled from the Developer Console to watch items being placed. You can also set form.cellBorder:1 to reveal the table structure for layout troubleshooting purposes.

Row and Column Sizing

colWidths controls the widths of form columns. FormItems that have "*" for width will fill the column. FormItems with a numeric width will have that width in pixels regardless of the column's specified width, which may cause the column to overflow as described under fixedColWidths.

For row heights, the largest pixel height specified on any item in the row is taken as a minimum size for the row. Then, any rows that have "*" or "%" height items will share any height not taken up by fixed-sized items.

Managing Overflow

Forms often contain labels, data values, or instructional text which can vary in size based on the skin, data values, or internationalization settings. There are a few ways to deal with a form potentially varying in size:

1. Allow scrolling when necessary, using overflow:auto, either on the immediate form, or on some parent.
2. Place the form in a Layout along with a component that can render any specified size, such as a ListGrid. In this case, the Layout will automatically shrink the grid in order to accommodate the form.
3. Ensure that the form can always render at a designed minimum size by reducing the number of cases of variable-sized text, and testing remaining cases across all supported skins. For example, move help text into hovers on help icons, or clip long text values at a maximum length and provide a hover to see the rest.

Several examples of Form Layout are available @see here.

See Also:

DynamicForm.getItemLayout(), DynamicForm.getNumCols(), DynamicForm.getFixedColWidths(), com.smartgwt.client.widgets.form.DynamicForm#getColWidths, DynamicForm.getMinColWidth(), DynamicForm.getCellPadding(), DynamicForm.getCellBorder(), DynamicForm.getSectionVisibilityMode(), FormItem.getWidth(), FormItem.getHeight(), FormItem.getTitleColSpan(), com.smartgwt.client.widgets.form.fields.FormItem#getColSpan, FormItem.getRowSpan(), FormItem.getStartRow(), FormItem.getEndRow(), ButtonItem.getStartRow(), ButtonItem.getEndRow()