Properties

root

The topmost item in the layout item tree. In browser terms: Think of the GoldenLayout instance as window object and of goldenLayout.root as the document.

container

A reference to the (jQuery) DOM element containing the layout

isInitialised

True once the layout item tree has been created and the initialised event has been fired.

config

A reference to the current, extended top level config.

selectedItem

The currently selected item or null if no item is selected. Only relevant if settings.selectionEnabled is set to true.

width

The current outer width of the layout in pixels

height

The current outer height of the layout in pixels

openPopouts

An array of BrowserWindow instances

isSubWindow

True if the layout has been opened as a popout by another layout

eventHub

A singleton instance of EventEmitter that works across windows

Events

initialised

Fired after layout.init() has been called and the layout tree has been created.

stateChanged

Fired whenever something happens that updates the state of the layout (as returned by layout.toConfig)

windowOpened

Fired when a new popout window was opened.

windowClosed

Fired when a previously created popout window was closed.

selectionChanged

Fired when the user selects a new / different item. Only relevant if settings.selectionEnabled is true.

itemDestroyed

Fired whenever an item gets destroyed.

itemCreated

Fired whenever an item is created.

componentCreated

Fired whenever a component is created.

rowCreated

Fired whenever a row is created.

columnCreated

Fired whenever a column is created.

stackCreated

Fired whenever a stack is created.

tabCreated

Fired whenever a tab is created.

GoldenLayout( configuration, container )

Constructs a new layout. The simplest use case would look something like this

myLayout = new GoldenLayout({
    content:[{ 
        type: 'component', 
        componentName: 'sayHi',
        componentState: { name: 'Wolfram' }
    }]
});
myLayout.registerComponent( 'sayHi',  function( container, state ){
    container.getElement().text( 'Hi ' + state.name ); 
});
myLayout.init();

registerComponent( name, component )

Registers either a component constructor or a component factory function with GoldenLayout. registerComponent is the counterpart to the componentName and componentState config keys in the item config.

Here's how it hangs together:

// Write your StockChart component constructor
StockChartComponent = function( container, state ) {
    //container will be an instance of {link 'apidocs/Container'}
};

// Register it with your GoldenLayout instance
myLayout.registerComponent( 'StockChart', StockChartComponent );

//Tell GoldenLayout where to create an instance of the component in
//your config
{
    componentName: 'StockChart',
    componentState: { stocks: [ 'APPL', 'GOOG' ] }
}

Alternatively you can provide a factory function.

myLayout.registerComponent( 'StockChart', function( container, state ){
    //For instance if you're using the same chart component and just pass
    //the type as an argument
    return new GenericChart( 'stock', state );
});

init()

Renders the layout into the container. If init() is called before the document is ready it attaches itself as a listener to the document and executes once it becomes ready.

toConfig()

Returns the current state of the layout and its components as a serialisable object.

getComponent( name )

Returns a component that was previously registered with layout.registerComponent().

updateSize(width, height)

Resizes the layout. If no arguments are provided GoldenLayout measures its container and resizes accordingly.

destroy()

Destroys the layout. Recursively calls destroy on all components and content items, removes all event listeners and finally removes itself from the DOM.

createContentItem( itemConfiguration, parent )

Creates a new content item or tree of content items from configuration. Usually you wouldn't call this directly, but instead use methods like layout.createDragSource(), item.addChild() or item.replaceChild() that all call this method implicitly.

createPopout( configOrContentItem, dimensions, parentId, indexInParent )

Creates a new popout window with configOrContentItem as contents at the position specified in dimensions

/*
 * Open a popout with testComponent as content.
 * Since parentId and indexInParent aren't specified
 * the component will be appended to the topmost
 * layout element if popIn() is called
 */
myLayout.createPopout({
    componentName: 'testComponent', 
    type: 'component'
}, {
    width: 200, 
    height: 300, 
    left: 400, 
    top: 100
});

createDragSource( element, itemConfiguration )

Turns a DOM element into a dragSource, meaning that the user can drag the element directly onto the layout where it turns into a contentItem.

selectItem( contentItem )

If settings.selectionEnabled is set to true, this allows to select items programmatically.

GoldenLayout.minifyConfig( config )

Static method on the GoldenLayout constructor! This method will iterate through a GoldenLayout config object and replace frequent keys and values with single letter substitutes.

GoldenLayout.unminifyConfig( minifiedConfig )

Static method on the GoldenLayout constructor! This method will reverse the minifications of GoldenLayout.minifyConfig.