How to create panels inside panel

Total Post:26

Points:182
Sencha 
 1112  View(s)
Ratings:
Rate this:
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
  1. Post:24

    Points:168
    Re: How to create panels inside panel

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

      Modified On Apr-11-2018 05:45:09 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!