Split Pane

(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

A component that provides a split pane container for displaying two forms side by side or one on top of the other.

This is a reference page; many components have detailed usage guides here.

Properties

divLocation

Sets the initial splitter div location, between 0 and 1 is a percentange, more than 1 is a value in pixels. Type: Number Default Value: -1

---

divSize

Size of the splitter div - in pixels. Type: Number Default Value: 5

---

enabled

Flag indicating whether the split pane is enabled for user interaction. Type: Enabled Default Value: true

---

pane1

The left or top pane object. Type: CustomType<servoyextra-splitpane.pane>

---

pane1MinSize

Minimum size (in pixels) allowed for the left or top pane. Type: Number Default Value: 30

---

pane2

The right or bottom pane object. Type: CustomType<servoyextra-splitpane.pane>

---

pane2MinSize

Minimum size (in pixels) allowed for the right or bottom pane. Type: Number Default Value: 30

---

panes

An array of pane objects. (Deprecated: use pane1 and pane2 instead.) Type: Array<CustomType<servoyextra-splitpane.pane>>

---

readOnly

Flag indicating whether the split pane is read-only. Type: Protected

---

resizeWeight

Specifies how extra space is distributed between the two panes. A value of 0 means the right/bottom pane gets all extra space; 1 means the left/top pane gets it. Type: Number Default Value: 0

---

responsiveHeight

Minimum height of the splitpane, set only in responsive forms. Type: Number Default Value: 300

---

splitType

Determines the split type. Typically, 0 represents horizontal splitting and 1 represents vertical splitting. Type: Number Default Value: 0

---

styleClass

CSS style classes applied to the split pane component. Type: Styleclass

---

tabSeq

Tab sequence order for keyboard navigation. Type: Tabseq

---

visible

Flag indicating whether the split pane is visible. Type: Visible

---

Events

onChangeMethodID(previousIndex,event)

Called when the split pane changes (for example, when the divider is moved).

Parameters:

• {Number} previousIndex The previous index or position of the divider.

• {JSEvent} event The event object associated with the change.

---

API

getDividerLocation()

Gets the divider location in pixels.

Example:

var dividerSize = myElement.dividerSize

Returns: Number The size in pixels

---

getDividerSize()

Gets the divider size in pixels.

Example:

var dividerSize = myElement.dividerSize

Returns: Number The size in pixels

---

getLeftForm()

Returns the left form of the split pane.

Example:

var leftForm = myElement.getLeftForm();

Returns: Formscope Left form of the split pane

---

getLeftFormMinSize()

Gets left form minimum size in pixels.

Example:

var left = myElement.leftFormMinSize

Returns: Number The minimum size in pixels for the left form panel.

---

getRelativeDividerLocation()

Gets the divider location in percentage when the component is visible.

Example:

var divRelativeLocation = myElement.getRelativeDividerLocation()

Returns: Number The location in percentage

---

getResizeWeight()

Gets the resize weight, which specifies how to distribute extra space when the size of the split pane changes. A value of 0, the default, indicates the right/bottom component gets all the extra space (the left/top component acts fixed), where as a value of 1 specifies the left/top component gets all the extra space (the right/bottom component acts fixed). Specifically, the left/top component gets (weight * diff) extra space and the right/bottom component gets (1 - weight) * diff extra space

Example:

var resizeWeight = myElement.resizeWeight

Returns: Number The resize weight value, indicating how the extra space is distributed between the left/top and right/bottom components of the split pane.

---

getRightForm()

Returns the right form of the split pane.

Example:

var rightForm = myElement.getRightForm();

Returns: Formscope Right form of the split pane

---

getRightFormMinSize()

Gets right form minimum size in pixels.

Example:

var right = myElement.rightFormMinSize

Returns: Number The minimum size in pixels for the right form panel.

---

setDividerLocation(location)

Sets divider location. If location is less then 1 then the location will be considered at (location * 100) percent of the split pane from left, otherwise it will represent the pixels from left.

Example:

myElement.dividerLocation = 0.75;
myElement.dividerLocation = 100;

Parameters:

• {Number} location The location of the divider.

---

setDividerSize(size)

Sets divider size in pixels.

Example:

myElement.dividerSize = 10;

Parameters:

• {Number} size The size of the divider in pixels.

---

setLeftForm(form,relation)

Set a relationless or related form as left panel.

Example:

myElement.setLeftForm(forms.orders);

Parameters:

• {Object} form The specified form or form name you wish to add as left panel

• {Object} [relation] The relation object used to link the left panel form to the main datasource, or null for a relationless form.

Returns: Boolean Value indicating if pane was successfully added

---

setLeftFormMinSize(minSize)

Sets left form minimum size in pixels.

Example:

myElement.leftFormMinSize = 100;

Parameters:

• {Number} minSize The minimum size in pixels for the left form panel.

---

setResizeWeight(resizeWeight)

Sets the resize weight, which specifies how to distribute extra space when the size of the split pane changes. A value of 0, the default, indicates the right/bottom component gets all the extra space (the left/top component acts fixed), where as a value of 1 specifies the left/top component gets all the extra space (the right/bottom component acts fixed). Specifically, the left/top component gets (weight * diff) extra space and the right/bottom component gets (1 - weight) * diff extra space

Example:

myElement.resizeWeight = 10;

Parameters:

• {Number} resizeWeight The weight value (between 0 and 1) specifying how to distribute extra space between the left/top and right/bottom components of the split pane.

---

setRightForm(form,relation)

Set a relationless or related form as right panel.

Example:

myElement.setRightForm(forms.orders);

Parameters:

• {Object} form The specified form or form name you wish to add as right panel

• {Object} [relation] The relation object used to link the right panel form to the main datasource, or null for a relationless form.

Returns: Boolean Value indicating if pane was successfully added

---

setRightFormMinSize(minSize)

Sets right form minimum size in pixels.

Example:

myElement.rightFormMinSize = 100;

Parameters:

• {Number} minSize The minimum size in pixels for the right form panel.

---

Types

pane

Represents a pane within the split pane. scripting type: CustomType<servoyextra-splitpane.pane>

• containsFormId

  • The form contained in this pane.

  • Type: form

• relationName

  • The relation name used to link the pane's form to the main datasource.

  • Type: relation

---