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

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

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

非常感谢。

Ext.panel.Panel项目没有出现

1 个答案: