Ext.panel.Panel 항목이 나타나지 않습니다.

Question

다른 패널에 의해 래핑 된 패널 클래스를 정의했습니다 **. 어떻게 든 하위 클래스의 항목이 렌더링되지 않습니다? 여러 레이아웃과 configs 시도했다뿐만 아니라 플렉스 구성 설정하려고했지만 그 조정 중 아무도 작동했습니다. 왜 그럴 수 있죠? 사전에

감사합니다 ...

(*) 패널 :

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의 의견에 달려 있습니다. 불행히도 계속 진행되는 리팩토링으로 인해 코드 스 니펫을 다시 게시하지 않습니다. 그렇지 않으면 더 혼란 스러울 수 있습니다.

• 내가 처음 시도한 실수는 입니다. 중첩 된 패널을 작성했습니다. 나는 Panel 클래스 대신에 Container 클래스로 몇 개를 확장해야했습니다. 그래서 먼저이 단계를 리팩토링했습니다. 다음은 확장 할 클래스를 설명하는 Sencha documentation입니다.
• 두 번째로 vbox & hbox 레이아웃을 사용했지만 flex 또는 width 구성을 명시하지 않았습니다. NAmorim의 의견을 통해 해당 항목을 리팩터링했습니다.

고마워요.