Widgets of the web UI framework

In the Palette view of the Designer and Extensibility Workbench, you can find the components, such as Controls, Grids (3.0.2 only), Panels, and Others, associated with the widgets of the web UI framework.

The following tables describe the widgets that are available in the Palette view of the Designer Workbench and the Extensibility Workbench.

Most of the widgets can be used with both Ext JS 2.2.1 and Ext JS 3.0.2. Widgets that can be used with only one version are identified.

The following items cannot be created with widgets:

Menus. Work with the Ext.menu.Menu class of Ext JS.
Wizards. Wizards must be defined using an XML file.
Repeating panels with radio buttons. Work with the Ext.form.Radio class of Ext JS.

Controls

Note: For information about the Column widget, refer to the Grids section. This widget appears in the Controls section in Ext JS 2.2.1 and in the Grids section in Ext JS 3.0.2.

Control	Description
Label	Text that can identify other controls.
Text	Text for input and display.
Date Time	Date and time values.
Number	Number values, up to 16 digits.
Big Number	Number values, more than 16 digits. The Big Number control works in the same way as the Number control, except that the getValue() function returns a string. The Big Number control is a customized control that is not documented in the online Ext JS documentation. It extends the features of the Text control.
TextArea	Multiple lines of text.
Field	Provides default event handling, sizing, value handling, and other functionality.
File Upload Widget	Used for accessing files from external sources.
Hidden	Hides values in forms that need to be passed when you submit a form.
Link	Connects outside of current screen (for example, a URL).
Button	When clicked, causes an action. Note: Ext JS 3.0.2 does not support the Toolbar.Button, Toolbar.Splitbutton, or the menu button.
Cycle Button	Button that cycles through menus as you click it. Down arrow displays items for each menu.
Check Box	Single box that flags a value as true or false.
Radio	A type of check box that can be grouped with other radio controls and allows only one control in a group to be checked.
TriggerField	A type of text field that includes a clickable trigger button.
Combination Box	A type of text field that includes a list of values from which you can select.
Time	Time input field with a time dropdown tool and automatic time validation.
Date	Date input field with a date picker tool and automatic time validation.
ProgressBar	Shows progress of an operation.
Slider	Supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking, and animation.
Display Field (3.0.2 only)	Display-only text field that is not validated or submitted.
Spacer (3.0.2 only)	Provides a gap or a space in a layout.
Spinner (3.0.2 only)	A number field with up and down arrows to increase or decrease the value in particular increments.

Grids (3.0.2 only)

Grid/Column	Description
Grid	Panel that includes table-like columns and rows.
EditableGrid	A type of grid that allows cell editing on selected columns.
Column	Normal/default column for a grid.
Boolean Column (3.0.2 only)	Renders boolean data fields.
Number Column (3.0.2 only)	Renders numeric fields according to a format string.
Date Column (3.0.2 only)	Renders date fields according to a specified format.
Template Column (3.0.2 only)	Renders values by processing a record's data using the XTemplate.

Panels

Note: For information about the Grid and EditableGrid widgets, refer to the Grids section. These two widgets appear in the Panels section in Ext JS 2.2.1 and in the Grids section in Ext JS 3.0.2.

Panel	Description
Panel	Container that can include: Bottom and top toolbars Separate header, footer and body sections Built-in expandable and collapsible behavior Prebuilt tool buttons that can be customized
Tree Panel	Tree-structured representation of hierarchically organized data.
Field Set	Groups form fields.
TabPanel	Groups tabs which can respond in unique ways to being activated and de-activated.
Toolbar (3.0.2 only)	Container that can include virtually any type of component.

Others

Use the Custom Component option in the Others section to add, to the screen, a component that you have created (like another screen developed using the Designer Workbench). The Custom Component option gives one screen access to a second screen whose components include that first screen (child-to-parent screen access). Use the preset properties to specify this access.