ExtJs BORDER LAYOUT не работает внутри CARD LAYOUT

Question

Я работаю над extjs впервые, возможно ли иметь расположение границ внутри макета карты. Если возможно, приведите пример примера.

Кодирование:

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',
                                    ......
                                    .........
                               }]
                }]
           } 
        ]

       }
      ]
});

В этом элементы внутри макета карты не работают, если я удаляю границу макета, то отображаются панели.

Answer 1

Это возможно Я создал ваш основной макет в скрипке. Общая структура выглядит как граница> карта> граница. Я добавил заголовки панелей, чтобы вы могли понять, где отображается каждая панель. Несколько вещей, чтобы отметить:

• region: 'center' возле margin: 10 в макете карты ничего не делает.
• Вы вложили больше, чем необходимо. Центральная панель может иметь непосредственно макет карты, а не одну дочернюю панель с макетом карты. Опытные пользователи форумов ExtJS всегда предлагают максимально упростить макет. Я подозреваю, что этот макет может быть упрощен больше, в зависимости от потребностей вашего приложения

Вот как выглядит код:

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