CLASS: DojoMenu

SUPER CLASS: Control

Subclasses

No subclasses found

Synopsis

The DojoMenu widget.

Full Description

Properties

DojoMenu.autoSizeHeight

DojoMenu.autoSizeWidth

DojoMenu.border

described in Control

Sets the border-width in pixels for your widget. Enter a single value like 5 to have a 5 px border around the widget. To have borders with different widths, enter a comma-separated list of pixel values like this:

border-top, border-right, border-bottom, border-left

For example, entering

10, 0, 5, 1

Will result in a border that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setBorder("5,0,10,15")

DojoMenu.borderColor

described in Control

Enter a border color for your widget; rgb and hex values are accepted: rgb(0,255,0) and #00FF00 are both valid entries.

You can also enter css color names, including black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white.

Use within the javascript editor

this.<WidgetID>.setBorderColor("rgb(0,255,0)");       
this.panel1.setBorderColor("#00FF00");
main.editor2.setBorderColor("purple");

DojoMenu.disabled

DojoMenu.height

described in Control

The height of your widget can be specified in px or % (i.e 50px, 75%).

You can have a column of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% height widget gets twice as much space as a 40% widget).

Use within the javascript editor

this.<WidgetID>.setHeight("50%");  
this.label1.setHeight("40px");

DojoMenu.margin

described in Control

Sets the margin in pixels for your widget. The margin for an object is outside of its border (the padding is inside the border).

Enter a single value like 5 to have a 5 px margin around the widget. To have margins with different widths, enter a comma-separated list of pixel values like this:

margin-top, margin-right, margin-bottom, margin-left

For example, entering

10, 0, 5, 1

Will result in a margin that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setMargin("5,0,10,15")

DojoMenu.menu

Defines the organization of the menu and submenus.

The following input will create 4 top-level menus: File, Edit, Zoom, and Help. The File menu will have 4 menu items: New, Open, Save, and Close. The Edit menu will have 3 menu itmes and the Zoom menu will have 4 menu items. The Help menu has not menu items.

File > New, Open, Save, Close
Edit > Cut, Copy, Paste
Zoom > 25%, 50%, 100%, 150%
Help

Each menu, with the list of menu items, should be listed on a single line. Note: the line may wrap due to limited space in the menu property editor. Do not press Enter until you have completed the definition of the menu with it's menu items. Enter is the delimiter between each top-level menu.

An onclick event will be created for each menu and for each menu item. For example, an onNewClick event will be created for the New menu item. Use the onNewClick event to define the action that will be invoked with the event occurs.

Submenus are created by naming a menu item using the same name as a menu. In the example below, File menu contains a New submenu and the View menu contains the Zoom submenu.

File > New, Open, Close
View > Standard, Zoom
Zoom > 25%, 50%, 100%
New > Project, File, Folder

Separators can be inserted within the menu using the seperator keyword. Note: In 5.2 there is a typo in this keyword ("seperator should be separator). This will be corrected in the next release.)

File > New, Open, seperator, Close, Exit

DojoMenu.minHeight

DojoMenu.minWidth

described in Control

Defines the minimum size of a widget. The minWidth property is used when the width property is set to a percent (%) value. The widget will shrink based on the available space until the minWidth pixel value is reached, at which point the widget will not shrink further.

DojoMenu.name

described in Component

The name is a unique identifier for your widget. Each page element and component must be uniquely identified. WaveMaker automatically renames any non-unique element.

The name makes it easy

1. Find the component in a bind dialog box
2. Find the component in your model tree
3. Reference the component in javascript

Use within the javascript editor

this.<UniqueID>.setShowing(true)

DojoMenu.padding

described in Control

Sets the padding in pixels for your widget. The padding for an object is inside of its border (the margin is outside the border).

Enter a single value like 5 to have a 5 px padding around the widget. To have padding with different widths, enter a comma-separated list of pixel values like this:

padding-top, padding-right, padding-bottom, padding-left

For example, entering

10, 0, 5, 1

Will result in padding that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setPadding("5,0,10,15")

DojoMenu.scrollX

described in Control

The ScrollX property enables you to turn on scrollbars for this widget such that more contents than would normally fit into its allocated width can be accessed. Technically, this sets the overflow style to scroll or to none.

Use within the javascript editor

You may want to programatically access this after changing the contents of this widget at runtime.

this.<WidgetID>.setScrollX(true);

DojoMenu.scrollY

described in Control

The ScrollY property enables you to turn on scrollbars for this widget such that more contents than would normally fit into its allocated height can be accessed. Technically, this sets the overflow style to scroll or to none.

Use within the javascript editor

You may want to programatically access this after changing the contents of this widget at runtime.

this.<WidgetID>.setScrollY(true);

DojoMenu.showing

described in Control

Showing determines whether or not a component is visible. A page element that is not showing has its css display style set to none; it is still a part of the DOM model of the page, but no longer affects the layout of other components.

Uncheck the checkbox to make this widget invisible. A widget that is not showing can still be selected by navigating to that widget in the model tree and clicking it.

Use within the javascript editor

this.<UniqueID>.setShowing(true)

DojoMenu.vertical

If true (checked) then menus will display vertically. The default is false (unchecked), displaying menus horizontally.

DojoMenu.width

described in Control

The width of your widget can be specified in px or % (i.e 50px, 75%).

You can have a row of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% width widget gets twice as much space as a 40% widget; they will fit in the designated space even though the sum is 120%).

Use within the javascript editor

this.<WidgetID>.setWidth("80px");