Ext.js - Ext.container.Viewport Container

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.

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 () {
            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>

The above program will produce the following result −

extjs_containers.htm