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

How to create panels inside panel

Simond Gear 2853 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

Simond Gear

Other

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'
 
                   }]
               });
           });

advertising

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.