Ext.js - vBox Layout

Description

vBox : This layout allows the element to be distributed in the vertical manner. This is one of the mostly used layout.

Syntax

Here is the simple syntax to use vBox layout

 layout: 'vbox'

Example

Following is a simple example showing the usage of vBox layout

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel = "stylesheet" />
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.panel.Panel', {
               renderTo : Ext.getBody(),
               layout : {
                  type :'vbox',
                  align: 'stretch'               
               },
               requires: ['Ext.layout.container.VBox'],
               xtype: 'layout-vertical-box',
               width : 600,
               height :400,
               frame :true,
               items : [{
                  title: 'Panel 1',
                  html : 'Panel with flex 1',
                  margin: '0 0 10 0',
                  flex : 1
               },{
                  title: 'Panel 2',
                  html : 'Panel with flex 2',
                  margin: '0 0 10 0',
                  flex : 2
               },{
                  title: 'Panel 3',
                  flex : 2,
                  margin: '0 0 10 0',
                  html : 'Panel with flex 2'
               },{
                  title: 'Panel 4',
                  html : 'Panel with flex 1',
                  margin: '0 0 10 0',
                  flex : 1
               }]
            });
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

This will produce following result −

extjs_layouts.htm