CODEWITHSUNDEEP
htmlextjsextjs4.2extjs-mvcsencha-architect
user3062437
user3062437

Reputation: 357

ExtJs BORDER LAYOUT does not work inside CARD LAYOUT

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.

Upvotes: 1

Views: 1023

Answers (1)

Andrea
Andrea

Reputation: 1057

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

Upvotes: 3

Related Questions