툴바가있을 때 Ext js FormPanel에 패널 항목이 표시되지 않습니다.

Question

여기에 이상한 문제가있는 것 같습니다. 확장 된 구성 요소에는 다음 코드가 있습니다.

MyApp.panels.RelationshipDetails = Ext.extend(Ext.FormPanel, { 
    closable: true, 
    relationshipId: null, 
    documentId: null, 
    title: 'Relationship', 
    initComponent: function() { 
     if (!this.verifyRequiredData()) { 
      MyApp.panels.RelationshipDetails.superclass.initComponent.call(this); 
      return; 
     } 

     // Build components 
     this.tbar = this.buildToolbar(); 
     this.items = this.buildDetailItemArray(); 

     MyApp.panels.RelationshipDetails.superclass.initComponent.call(this); 
    }, 

    verifyRequiredData: function() { 
     // Verification code here 
    }, 

    buildDetailItemArray: function() { 
     return [{ 
      xtype: 'fieldset', 
      title: 'Details', 
      collapsible: true, 
      autoHeight: true, 
      items: [{ 
       xtype: 'hidden', 
       name: 'Id' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Description', 
       name: 'Description' 
      }, { 
       xtype: 'button', 
       text: 'Save', 
       name: 'saveButton' 
      }] 
     }]; 
    }, 

    buildToolbar: function() { 
     return new Ext.Toolbar({ 
      // Toolbar Config 
     }); 
    } 
}); 

이 패널이 렌더링 될 때 도구 모음이 렌더링하는 유일한 문제입니다. 디버깅을 통해 BuildDetailItemArray()이 올바르게 호출되고 올바른 결과를 반환하는 것을 볼 수 있습니다.

this.tbar = 줄을 주석 처리 할 때 도구 모음이 없기 때문에 fieldset 및 field가 올바르게 렌더링되기 때문에 훨씬 더 이상합니다. 을 FormPanel 대신 확장해도이 문제가 발생합니다. 또한 양식 필드를 추상화하여 자체 구성 요소로 만들려고했는데 같은 일이 발생합니다.

누구나 왜 이것이 작동하지 않는지 알 수 있습니까?

Answer 1

이 패널을 배치하려는 레이아웃은 무엇입니까? 또한이 패널의 높이를 설정하고 있습니까?

앵커 레이아웃을 사용하는 경우 앵커를 설정하지 않는 경우 추가하려는 구성 요소의 높이를 지정하지 않으면 (이 패널에서이 패널에 추가됨) 구성 요소 내용이 표시되지 않고, 하지만 여전히 도구 모음이됩니다.

전체 레이아웃에서이 패널의 컨텍스트를 아는 것이 좋습니다.