Ext.js – vBox Layout

In this guide, we will discuss vBox Layout in Ext.js .

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

<!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>

Next Topic : Click Here

This Post Has 2 Comments

Leave a Reply