Interface FormItemStyling

FormItem Styling

Different FormItem types are rendered using different DOM structures. This is an overview
explaining the various elements that may be produced and how they can be styled:

Form items
written out by a DynamicForm with itemLayout:"table" are written into
table cells. A formItem can govern the appearance of these cells using properties such as
FormItem.cellStyle,
FormItem.cellHeight.
These properties have no effect for formItems rendered outside a form (for example the during
grid editing), or if
itemLayout is "absolute".

If a formItem is showing a picker icon, the picker
icon and text box will be written into an element referred to as the control table. Styling
applied to this element (via FormItem.controlStyle) will
extend around both the text box and the picker (but not other icons, hints, etc)

Any visible
valueIcon will be
rendered inside the text box for static items, or adjacent to it for items where the text is
editable (such as TextItem). Explicit styling
for the valueIcon can be specified via the FormItem.getValueIconStyle() method.

FormItems can also show explicitly defined FormItem.icons. By default these
show up next to the item, outside its text box and control table / after the picker icon (if present),
though inline
positioning is also supported for some cases. Their appearance and behavior are heavily
customizable - see FormItemIcon.baseStyle, FormItemIcon.src and related properties.

Default styling for items will vary by skin, and note that subclasses of FormItem may have
additional styling properties not explicitly called out here. Developers performing global
styling modifications for formItems should also be aware of compound items (such as DateItem) which achieve their user interface by
embedding simpler items in an outer structure. See CompoundFormItem_skinning.