Ext.panel.Panel项目没有出现

问题描述：

我已经定义了一个面板类*，它被另一个面板**包裹。不知何故，子类的项目不渲染？我已经尝试了几种布局和配置，以及尝试设置柔性配置，但没有任何调整工作。为什么会这样？Ext.panel.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}' 
            } 
           } 
          ] 
         } 
        ] 
       } 
      ] 
     } 

    ] 
});

（**）以上所谓的这一个小组：

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 admin dashboard示例和其他几个面板_（apanel＆cpanel）_定义了这些面板，效果很好，但除此之外__ bpanel-_。 –

使用'vbox'和'hbox'布局时，必须明确设置宽度或在子组件上使用'flex'属性。我相信不设置它不会渲染它们，因为它们没有被编程为“适合”可用空间。 – NAmorim

答

嗯，我找到的解决方案取决于一些其他的stackoverflow问题和NAmorim的评论。不幸的是，由于正在进行重构，我不会重新发布代码片段，否则您可能会更加混淆。

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

非常感谢。

Ext.panel.Panel项目没有出现

相关推荐