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

來源

2017-11-11 Nuri Engin

這裏有一些錯誤。發佈一個工作測試用例。 –

@EvanTrimboli究竟是什麼錯，或者我在這裏錯過了什麼？我已經通過sencha admin dashboard示例和其他幾個面板_（apanel＆cpanel）_定義了這些面板，效果很好，但除此之外__ bpanel-_。 –

使用'vbox'和'hbox'佈局時，必須明確設置寬度或在子組件上使用'flex'屬性。我相信不設置它不會渲染它們，因爲它們沒有被編程爲「適合」可用空間。 – NAmorim

嗯，我找到的解決方案取決於一些其他的stackoverflow問題和NAmorim的評論。不幸的是，由於正在進行重構，我不會重新發布代碼片段，否則您可能會更加混淆。

我已經完成的第一個錯誤是大約擴展類。我已經創建了嵌套面板。我不得不延長其中幾個與Container類，而不是Panel類。所以首先重構這一步驟。這是Sencha documentation，它解釋了要擴展的類。
其次，我用vbox & hbox佈局，但沒有說明任何flex或width配置。我通過NAmorim的評論重構了這些項目。

非常感謝。

來源

2017-11-13 11:36:06

Ext.panel.Panel項目沒有出現

回答

相關問題