没有出现Ext.panel.Panel项

Question

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

提前谢谢..。

(*)小组：

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

嗯，我已经找到了解决办法，取决于其他一些堆叠溢出问题和NAmorim的评论。不幸的是，由于正在进行的重构，我不会重新发布代码片段，否则您可能会更加困惑。

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

非常感谢。