Jx.Toolbar

Extends: Object

Implements: Options, Events

A toolbar is a container object that contains other objects such as buttons. The toolbar organizes the objects it contains automatically, wrapping them as necessary. Multiple toolbars may be placed within the same containing object.

Jx.Toolbar includes CSS classes for styling the appearance of a toolbar to be similar to traditional desktop application toolbars.

There is one special object, Jx.ToolbarSeparator, that provides a visual separation between objects in a toolbar.

While a toolbar is generally a dumb container, it serves a special purpose for menus by providing some infrastructure so that menus can behave properly.

In general, almost anything can be placed in a Toolbar, and mixed with anything else.

Example

The following example shows how to create a Jx.Toolbar instance and place two objects in it.

//myToolbarContainer is the id of a <div> in the HTML page.
function myFunction() {}
var myToolbar = new Jx.Toolbar('myToolbarContainer');

var myButton = new Jx.Button(buttonOptions);

var myElement = document.createElement('select');

myToolbar.add(myButton, new Jx.ToolbarSeparator(), myElement);

Events

add	fired when one or more buttons are added to a toolbar
remove	fired when on eor more buttons are removed from a toolbar

Implements

Options

License

This file is licensed under an MIT style license

Summary

Jx.Toolbar	Extends: Object
Properties
items	{Array} an array of the things in the toolbar.
domObj	{HTMLElement} the HTML element that the toolbar lives in
isActive	When a toolbar contains Jx.Menu instances, they want to know if any menu in the toolbar is active and this is how they find out.
Options
position	the position of this toolbar in the container.
parent	a DOM element to add this toolbar to
autoSize	if true, the toolbar will attempt to set its size based on the things it contains.
scroll	if true, the toolbar may scroll if the contents are wider than the size of the toolbar
Constructor
Jx.Toolbar	Create a new instance of Jx.Toolbar.
Functions
addTo	add this toolbar to a DOM element automatically creating a toolbar container if necessary
add	Add an item to the toolbar.
remove	remove an item from a toolbar.
deactivate	Deactivate the Toolbar (when it is acting as a menu bar).
isActive	Indicate if the toolbar is currently active (as a menu bar)
setActive	Set the active state of the toolbar (for menus)
setVisibleItem	For menus, they want to know which menu is currently open.

Properties

items

{Array} an array of the things in the toolbar.

domObj

{HTMLElement} the HTML element that the toolbar lives in

isActive

When a toolbar contains Jx.Menu instances, they want to know if any menu in the toolbar is active and this is how they find out.

Options

position

the position of this toolbar in the container. The position affects some items in the toolbar, such as menus and flyouts, which need to open in a manner sensitive to the position. May be one of ‘top’, ‘right’, ‘bottom’ or ‘left’. Default is ‘top’.

parent

a DOM element to add this toolbar to

autoSize

if true, the toolbar will attempt to set its size based on the things it contains. Default is false.

scroll

if true, the toolbar may scroll if the contents are wider than the size of the toolbar

Constructor

Jx.Toolbar

Create a new instance of Jx.Toolbar.

Parameters

options

Jx.Toolbar.Options

Functions

addTo

addTo: function( parent )

add this toolbar to a DOM element automatically creating a toolbar container if necessary

Parameters

parent

the DOM element or toolbar container to add this toolbar to.

add

add: function( )

Add an item to the toolbar. If the item being added is a Jx component with a domObj property, the domObj is added. If the item being added is an LI element, then it is given a CSS class of jxToolItem. Otherwise, the thing is wrapped in a <Jx.ToolbarItem>.

Parameters

thing

{Object} the thing to add. More than one thing can be added by passing multiple arguments.

remove

remove: function( item )

remove an item from a toolbar. If the item is not in this toolbar nothing happens

Parameters

item	{Object} the object to remove

Returns

{Object} the item that was removed, or null if the item was not removed.

deactivate

deactivate: function()

Deactivate the Toolbar (when it is acting as a menu bar).

isActive

isActive: function()

Indicate if the toolbar is currently active (as a menu bar)

Returns

{Boolean}

setActive

setActive: function( b )

Set the active state of the toolbar (for menus)

Parameters

b	{Boolean} the new state

setVisibleItem

setVisibleItem: function( obj )

For menus, they want to know which menu is currently open.

Parameters

obj	{Jx.Menu} the menu that just opened.