public 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). The control table is not written out if the pickerIcon is not visible except in the case where the FormItem.showPickerIconOnFocus is true, and the item does not have focus, or if a developer explicitly sets FormItem.alwaysShowControlBox to true.

The textBox of an item is the area containing its main textual content. This may natively be achieved as a data element (such as an <input ...>), or a static DOM element. See FormItem.textBoxStyle, and related FormItem.readOnlyTextBoxStyle and FormItem.printTextBoxStyle for styling options. See also FormItem.shouldApplyHeightToTextBox() for a discussion on sizing the text box.

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.

FormItem hints may be written out as static text after any icons, and styled according to the FormItem.hintStyle - or where supported, written directly into the text box with styling derived from the textBoxStyle plus a suffix of "Hint". (See TextItem.showHintInField).

In addition to this, form items may show validation error icons or text (see DynamicForm.showInlineErrors, FormItem.showErrorIcon and FormItem.showErrorText). The position of these error indicators is controlled by DynamicForm.errorOrientation.

Most formItem user-interface elements support stateful styling - showing a different appearance for focused, over, disabled and error states.

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.

Interface FormItemStyling

FormItem Styling