forum

Home / DeveloperSection / Forums / How to create panels inside panel

How to create panels inside panel

Simond Gear 2218 24-Nov-2016

Hi Buddy

I am working on sencha extjs project so i want to know that how to create panels inside panel.

I would really appreciate your help

Thanks

sencha

Updated on 24-Nov-2016

Simond Gear

Simond Gear

Follow

Can you answer this question?

1 Answers

Abhishek Srivasatava

24-Nov-2016

Hi Simond,

I have created the code for the border panel containing accordion panel.

Please Review it, let us know if any other information is required.


               Ext.onReady(function () {
               Ext.create('Ext.panel.Panel', {        // Creating Panel
                   renderTo: 'div2', 
                   height: 585,            
                   width: 1360 ,
                   layout: 'border',
                       items: [{                           // Creating Panel inside Panel       
                       title: 'West Panel ',
                       region: 'west',
                       html: 'West Panel Test ',
                       collapsible: true,
                       split: true,
                       width: 300,
                       layout : 'accordion',
                       bodyStyle: 'padding:15px',
                       items: [{                           // Creating Panel inside Panel 
                           title: 'Panel Test 1',
                           html: 'Panel 1 Test  html content'
                       }, {
                           title: 'Panel Test  2',
                           html: 'Panel 2 Test  html content'
                       }, {
                           title: 'Panel Test  3',
                           html: 'Panel 3 Test  html content'
                       }]
                      
                   }, {
                       title: 'south Panel',
                       region: 'south',
                       html: 'South Panel Test ',
                       collapsible: true,
                       split: true,
                       bodyStyle: 'padding:15px'
 
                   }, {
                       title: 'East Panel',
                       region: 'east',
                       html: 'East Panel Test',
                       collapsible: true,
                       split: true,
                       bodyStyle: 'padding:15px'
 
                   }]
               });
           });