Skip to content


VBox Widget

Important: You cannot create new VBox(deprecated) forms, but you can import VBox forms from your previous projects into your latest projects and continue to work with them seamlessly. When you create a new template in a project in Volt MX Iris from V8 SP2 onwards, the top-level FlexContainer automatically is created along with your template. You can delete the FlexContainer and add a VBox(deprecated) form if needed.

A VBox is used to layout widgets in a single vertical orientation. It can contain any number of widgets. However, due to form size limitations, it is advisable not to place many widgets in a VBox.

You can add the VBox Widget only to the VBox form. This widget will be available in the Widgets palette when the VBox form is selected in the app canvas.

A VBox provides you with an option to set basic properties, layout properties for all platforms and properties for specific platforms. You can also call/set Events and Methods on platforms as mentioned in the respective sections.

For information regarding the behavior exhibited by the VBox, see VBox Behavior.

Basic Properties Layout Properties Platform Specific Properties
focusSkin containerWeight blockedUISkin
id gridCell borderCollapse
info layoutMeta contextMenu
isVisible layoutType hoverSkin
orientation layoutAlignment viewConfig
skin margin  
Events Methods Deprecated
onClick add
onHover addAt
onRightClick remove
preOnclickJS removeAt
postOnclickJS replaceAt


Creating a VBox using a constructor: voltmx.ui.Box

var box1 = new voltmx.ui.Box(basicConf, layoutConf, pspConf)
  • basicConf is an object with configuration properties.
  • layoutConf is an object with layout specific configuration properties.
  • pspConf is an object with platform specific configuration properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.


function boxOnClickEventTest(box)
    alert("OnClick event is invoked successfully");

//Defining the properties for a box with the ID :"boxIdTest"
var basicConfBox = {id:"boxIdTest", isVisible:true, orientation:constants.BOX_LAYOUT_VERTICAL, onClick:boxOnClickEventTest};

var layoutConfBox = {containerWeight:80, percent:false, layoutAlignment:constants.BOX_LAYOUT_ALIGN_FROM_LEFT, contentAlignment:constants.CONTENT_ALIGN_TOP_CENTER, padding:[10,10,10,10], margin:[0,5,0,5]};

var pspConfBox = {borderCollapse:true, blockedUISkin:"blockUISkin" };

//Creating the box.
boxTest = new voltmx.ui.Box(basicConfBox, layoutConfBox, pspConfBox);