In this guide we will discuss Ext.container.viewport container in Ext.js . Ext.container.Viewport − Viewport is a container that automatically resizes itself to the size of the whole browser window. You can then add other ExtJS UI components and containers in it.
Syntax
Following is the simple syntax to create Ext.container.Viewport container.
Ext.create('Ext.container.Viewport', {
items: [child1, child2]
// this way we can add different child elements to the container as container items.
});
Example
Following is a simple example showing Ext.container.Viewport container.
<!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 () {
var childPanel1 = Ext.create('Ext.panel.Panel', {
title: 'Child Panel 1',
html: 'A Panel'
});
var childPanel2 = Ext.create('Ext.panel.Panel', {
title: 'Child Panel 2',
html: 'Another Panel'
});
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [ childPanel1, childPanel2 ]
});
});
</script>
</head>
<body>
</body>
</html>
Next Topic : Click Here
Pingback: Ext.js - Containers | Adglob Infosystem Pvt Ltd