Jx.Button.Flyout

Extends: Jx.Button

Implements: Jx.ContentLoader, Jx.AutoPosition, Jx.Chrome

Flyout buttons expose a panel when the user clicks the button.  The panel can have arbitrary content.  You must provide any necessary code to hook up elements in the panel to your application.

When the panel is opened, the ‘open’ event is fired.  When the panel is closed, the ‘close’ event is fired.  You can register functions to handle these events in the options passed to the constructor (onOpen, onClose).

The user can close the flyout panel by clicking the button again, by clicking anywhere outside the panel and other buttons, or by pressing the ‘esc’ key.

Flyout buttons implement Jx.ContentLoader which provides the hooks to insert content into the Flyout element.  Note that the Flyout element is not appended to the DOM until the first time it is opened, and it is removed from the DOM when closed.

It is generally best to specify a width and height for your flyout content area through CSS to ensure that it works correctly across all browsers.  You can do this for all flyouts using the .jxFlyout CSS selector, or you can apply specific styles to your content elements.

A flyout closes other flyouts when it is opened.  It is possible to embed flyout buttons inside the content area of another flyout button.  In this case, opening the inner flyout will not close the outer flyout but it will close any other flyouts that are siblings.

Example

var flyout = new Jx.Button.Flyout({
     label: 'flyout',
     content: 'flyoutContent',
     onOpen: function(flyout) {
         console.log('flyout opened');
     },
     onClose: function(flyout) {
         console.log('flyout closed');
     }
});

Events

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license