Working with widgets in the web UI framework

You can re-arrange, delete, and view or change the properties of a a widget in the UI framework.

Use the Outline View (Extensibility Workbench) or the Tree View (Designer Workbench) to do the following when you are working with widgets:
  • Re-arrange widgets

    Different rules apply to how you can re-arrange widgets. For example, you cannot move a button from a standard panel to a standard grid. The Designer Workbench has built-in safeguards against the improper re-arrangement of widgets. An error message appears if you try to move a button from a standard panel to a standard grid. These safeguards help you organize your screen in the most functional way.

    You can re-arrange widgets in the following ways:
    • Change the order of widgets. For example, you can place a text field between two buttons.
    • Move a widget from the main screen to a panel, or from one panel to another panel. For example, you can move a button from a standard panel to a field set. Or you can move a column from a standard grid to an editable grid.
    • Move one standard panel onto another standard panel.

    If a screen uses a special tab sequence, re-arranging widgets might affect your intended sequence of actions when you tab from one widget to another.

  • Delete widgets

    You cannot delete a widget from the base/out-of-the-box screen. You can only delete widgets that were added using the Extensibility Workbench. If you delete a widget that was used to work with data (like a text box or combination box), you will have to find another way to work with that data.

  • Select a widget so that you can view or change its properties in the Properties view. If you are unsure of what widget is being shown in the Outline or Tree View, click the widget on the screen, and a horizontal blue line will show the location of the widget in the view.

    You can always use the canvas to select a widget, but it is not as precise as using the Outline View or Tree View. On the canvas, it might take you several clicks to select the right widget.

    For more information about widget properties, refer to the Ext JS framework documentation for version 2.2.1 or the Ext JS framework documentation for version 3.0.2.