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
Pingback: Ext.js - Table Layout | Adglob Infosystem Pvt Ltd
Pingback: Ext.js - Layouts | Adglob Infosystem Pvt Ltd