What is Container and how to use it in ExtJs?

Total Post:70

Points:350
 652  View(s)
Ratings:
Rate this:
  1. Post:70

    Points:350
    What is Container and how to use it in ExtJs?

    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:



      Modified On Mar-29-2018 12:19:37 AM

Answer