What is Container and how to use it in ExtJs?

Abhishek Srivasatava

What is Container and how to use it in ExtJs?

Posted on 3 years ago

Containers in ExtJs is the term which is used to describe the grouping of the different component.

Example: there are four components A, B, C, and D and we need to show two elements in one block and rest to in different blocks.

That block is called a container.

A Container may contain other containers also.

An example to show how to use component inside the 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', {
               title: 'panel1',
              
               width: 70,
               height: 70,
               html: 'First Panel'
           });
 
           var childPanel2 = Ext.create('Ext.Panel', {
               title : 'panel2',
            
               width: 70,
               height: 70,
               html: 'second Panel'
           });
 
           var childPanel3 = Ext.create('Ext.Panel', {
               title: 'panel3',
 
               width: 70,
               height: 70,
               html: '3rd Panel'
           });
 
           var childPanel4 = Ext.create('Ext.Panel', {
               title: 'panel4',
 
               width: 70,
               height: 70,
               html: '4th Panel'
           });
 
          var container1= Ext.create('Ext.container.Container', {
              // renderTo: Ext.getBody(),
               width: 160,
               height: 100,
               border: true,
               frame: true,
               layout : 'accordion',
               items: [childPanel1,childPanel2]
           });
 
           Ext.create('Ext.container.Container', {
               renderTo: Ext.getBody(),
               width: 160,
               height: 100,
               border: true,
               frame: true,
               items: [container1,childPanel3, childPanel4]
           });
 
 
       });
   </script>
</head>
<body>
</body>
</html>

In the above example, we have used multiple functionalities of the container. We have created 4 panels and 2 containers. 1st container will contain 2 panels and 2nd container will contain 2 panels and 1child container.

If we execute above program, we will get following result:

What is Container and how to use it in ExtJs?

What is Container and how to use it in ExtJs?

Answer

Login