Ext.panel.Panel 项目未出现答案

【问题标题】：Ext.panel.Panel Items is not appearingExt.panel.Panel 项目未出现
【发布时间】：2018-04-24 12:06:23
【问题描述】：

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

提前谢谢...

(*) 面板：

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

【问题讨论】：

这里有很多问题。发布一个工作测试用例。
@EvanTrimboli 到底出了什么问题或者我在这里遗漏了什么？我已经通过 sencha 管理仪表板示例定义了这些面板，其他几个面板 (apanel & cpanel) 效果很好，但除了这个 -bpanel-。
当您使用vbox 和hbox 布局时，您必须显式设置宽度或在子组件上使用flex 属性。我相信不设置它不会渲染它们，因为它们没有被编程为fit 可用空间。
我刚读了这个doc，我想我也有关于扩展类的问题。因此将对其进行快速重构..

标签： javascript extjs layout panel

【解决方案1】：

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

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

非常感谢。

【讨论】：