ExtJs BORDER LAYOUT does not work inside CARD LAYOUT

Question

I am working on extjs for first time is it possible to have border layout inside card layout.If possible please provide me a sample example.

Coding:

Ext.define('app.view.main'{
extend: 'Ext.panel.Panel',
xtype: 'mainview',
layout: 'border',
border: false,
items:[
       {
         xtype:'panel',
         region:'north',
         ......
         .........
       },
       {
         xtype:'panel',
         region:'west',
         ......
         .........
       },
       {
         xtype:'panel',
         region:'center',
         items: [
            {
                xtype:'panel',
                layout:'card',
                items:[{
                         xtype: 'panel',
                         region: 'center',
                         margin: 10,
                         layout: 'border',
                         items:[{
                                   xtype:'panel',
                                   region:'center',
                                   ......
                                   .........
                                 },
                                 {
                                    xtype:'panel',
                                    region:'south',
                                    ......
                                    .........
                               }]
                }]
           } 
        ]

       }
      ]
});

In this the items inside card layout is not working if i remove the layout border then the panels are displayed.

Answer 1

It's possible. I've created your basic layout in the fiddle. The general structure seems to be border > card > border. I've added panel titles so that you can get a feel for where each panel is displayed. A couple things to note:

• region: 'center' near margin: 10 within the card layout does nothing.
• You've nested more than necessary. The center panel can just have card layout directly, rather than having one child panel with the card layout. The power users within the ExtJS forums always suggest flattening the layout as much as possible. I suspect this layout could be simplified more, depending on the needs of your application

Here's what the code looks like:

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    height: 300,
    width: 500,
    title: 'testing',
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        title: 'outer north',
        height: 60
    }, {
        xtype: 'panel',
        region: 'west',
        title: 'outer west',
        width: 60
    }, {
        xtype: 'panel',
        region: 'center',
        title: 'outer center',
        layout: 'card',
        items: [{
            xtype: 'panel',
            title: 'card 1',
            layout: 'border',
            items: [{
                xtype: 'panel',
                region: 'center',
                title: 'inner center'
            }, {
                xtype: 'panel',
                region: 'south',
                title: 'inner south'
            }]
        }, {
            xtype: 'panel',
            title: 'card 2'
        }]
    }]
});