Splitter
A draggable splitter that lets users resize neighboring elements by clicking and dragging. Place it between two sibling elements (or widgets) and it will automatically detect whether to operate horizontally or vertically based on the parent's flex direction. Optionally show collapse/expand buttons with the showButtons config.
Double click on the splitter to share the space evenly between the two neighboring elements. CTRL (CMD on Mac) double click to share the space evenly between all siblings in the parent container.
// Place between two panels in a flex container
new Container({
appendTo : document.body,
layout : 'box',
items : [
{ type : 'panel', title : 'Left', flex : 1, html : 'Left content' },
{ type : 'splitter' },
{ type : 'panel', title : 'Right', flex : 1, html : 'Right content' }
]
});
Useful configs, properties, and events
| Config / Event | Description |
|---|---|
| orientation | 'auto', 'horizontal', or 'vertical' |
| showButtons | Show collapse/expand buttons on the splitter bar |
| currentOrientation | The resolved orientation when configured as 'auto' |
| dragStart | Fired when the user starts dragging the splitter |
| drag | Fired during drag |
| drop | Fired when the drag completes |
See also
- Container - Use a container with
layout: 'box'to host splitters - Panel - Panels support collapsible as an alternative to splitter-based resizing
Configs
Configs are options you supply in a configuration object when creating an instance of this classProperties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Splitter class, or subclass thereof.
-
Get actually used orientation, which is either the configured value for
orientationor if configured with 'auto' the currently used orientation. -
Splitter orientation, see orientation. When set to 'auto' then actually used orientation can be retrieved using currentOrientation.
Has a corresponding orientation config.
-
Identifies an object as an instance of Splitter class, or subclass thereof.
Functions
Functions are methods available for calling on the class-
syncState( )private
Determine orientation when set to
'auto'and detects neighboring widgets to monitor their hidden/collapsed states.