Ext.panel.Panel Items is not appearing

Question

I've defined a panel class* which is wrapped by another panel**. Somehow subclass' items are not rendering? I've tried several layouts and configs, as well tried to set flex config but none of those adjustment worked. Why it could be?

Thanks in advance...

(*) Panel:

Ext.define('AP.view.dashboard.BPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'bpanel',

    requires: [
        'Ext.layout.container.HBox',
        'Ext.layout.container.VBox',
        'Ext.ProgressBar'
    ],

        layout : {type  : 'vbox', align : 'stretch', pack: 'center'},

    items: [
        {
          xtype: 'panel',
          layout: 'vbox',
          items: [
              {
                  xtype: 'component',
                  html: 'TEXT'
              },
              {
                  xtype: 'component',
                  html: '20.82%'
              }
          ]
        },
        {
            xtype: 'panel',
            layout: 'vbox',
            items: [
                {
                    xtype: 'progressbar',
                    flex: 1,
                    cls: 'left-top-text progressbar-no-text',
                    height: 7.5,
                    hideMode: 'display',
                    margin: '0 15 0 0',
                    maxHeight: 10,
                    minHeight: 3,
                    value: 0.7,
                    text: ''
                },
                {
                    xtype: 'panel',
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'panel',
                            layout: 'vbox',
                            items: [
                                {
                                    xtype: 'component',
                                    html: '2016'
                                },
                                {
                                    xtype: 'component',
                                    html: '3750'
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            layout: 'vbox',
                            items: [
                                {
                                    xtype: 'component',
                                    html: '2017'
                                },
                                {
                                    xtype: 'component',
                                    html: '4550'
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            layout: 'vbox',
                            items: [
                                {
                                    xtype: 'component',
                                    html: 'Trend'
                                },
                                {
                                    xtype: 'chartvisitors',
                                    flex: 1,
                                    cls: 'graph-analysis-right-inner-container right-value',
                                    bind: {
                                        store: '{visitors}'
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }

    ]
});

(**) The panel above called by this one:

Ext.define('AP.view.dashboard.DashMid', {
    extend: 'Ext.panel.Panel',
    xtype: 'dashmid',

    requires: [
        'Ext.layout.container.HBox',
        'Ext.layout.container.VBox',
        'HR.view.dashboard.APanel',
        'HR.view.dashboard.BPanel',
        'HR.view.dashboard.CPanel'
    ],

    layout: {type: 'hbox'},
    padding: 5,

    items: [
        {
           xtype: 'apanel'

        },
        {
            xtype: 'panel',
            layout: {type: 'vbox'},
            items: [
                {
                    xtype: 'bpanel'
                }
            ]
        },
        {
            xtype: 'cpanel'
        }
    ]
});

Answer 1

Well, I've found solution depends on some other stackoverflow questions and NAmorim's comment. Unfortunately because of on-going refactoring I won't repost code snippets, otherwise you could be more confuse.

• The first mistake I've been done is about extended classes. I've crated nested panels. I had to extend several of them with Container class, instead of Panel class. So firstly refactored this step. Here is the Sencha documentation that explains which class to extend.
• Secondly I've used vbox & hbox layouts but haven't stated any flex or width config. I've refactored those items through NAmorim's comment.

Thanks a lot.