Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

home / developersection / interviews / what is container and how to use it in extjs?
Ask Question
Abhishek Srivasatava
Abhishek Srivasatava

Employee

Message

1 Answers

Abhishek Srivasatava
Abhishek Srivasatava 14 Nov 2016
Report Abuse

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:


Abhishek Srivasatava

advertising