Ext.panel.Panel 项目没有出现

Question

我定义了一个面板 class*，它被另一个面板包裹**。不知何故 subclass' 项目没有呈现？我尝试了几种布局和配置，也尝试设置弹性配置，但 none 这些调整有效。为什么会这样？

提前致谢...

(*) 面板：

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

    ]
});

(**) 上面调用的面板：

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

好吧，我发现解决方案取决于其他一些 Whosebug 问题和 NAmorim 的评论。不幸的是，由于正在进行的重构，我不会重新发布代码片段，否则您可能会更加困惑。

我犯的第一个错误是关于 extended classes。我已经装箱嵌套面板。我不得不用 Container class 而不是 Panel class 来扩展其中的几个。所以首先重构了这一步。这是 Sencha documentation 解释了要扩展哪个 class。
其次，我使用了 vbox 和 hbox 布局，但没有说明任何 flex 或 width 配置。我已经通过 NAmorim 的评论重构了这些项目。

非常感谢。

Ext.panel.Panel 项目没有出现

Ext.panel.Panel Items is not appearing

javascript

layout

extjs

panel