컨테이너 extj에 동적으로 텍스트 영역 추가

Question

동적으로 컨테이너에 텍스트 영역을 추가하는 데 문제가 있습니다.

용기

초기 생성 :

xtype: 'container', 
    layout: 'form', 
    width: 400, 
    ref: 'form', 
    layoutConfig: { 
     labelSeparator: ' ', 
     trackLabels: true 
    }, 
    items: [{ 
     xtype: 'textarea', 
     value: 'test', 
     fieldLabel: 'label', 
     anchor: '100%', 
     submitValue: false, 
     readOnly: true, 
     ref: '../field_1', 
     id: 'field_1' 
    }] 
} 

동적 코드 : 텍스트 영역을 만들

for (i = 4; i < obj.length; i++) { 
    var id = i + 12; 
    id = 'field_' + id; 
    var field = newTextArea(id); 
    field.setValue(obj[i].value); 
    field.setVisible(true); 
    this.form.add(field); 
} 

기능 :

function newTextArea(id) { 
    var text_Area = new Ext.form.TextArea({ 
     fieldLabel: 'Test', 
     height: 30, 
     width: 250, 
     submitValue: false, 
     readOnly: true, 
     autoScroll: true, 
     id: id 
    }); 
    return text_Area; 
} 

문제점 : 디버그 참조

형태, textarea는 양식 항목에 추가되었지만 브라우저에는 표시되지 않습니다. 누군가가 무엇을 할 것을 제안 할 수 있습니까?

감사합니다,

주권

Answer 1

확인이 simple fiddle.

코드에 무엇이 잘못된지 잘 모르는 경우 obj이 무엇인지 언급하지 않고 해당 this.form이 컨테이너에 대한 잘못된 참조라고 생각합니다. 나는 당신이 Ext.ComponentQuery.query 또는 이와 비슷한 것을 사용할 수 있다고 생각한다. (예 : queryable 구성 요소의 경우 up과 down 방법).

Answer 2

extjs 3.x에서는 컨테이너에 항목을 추가 한 후 doLayout으로 전화해야합니다.

for (i = 4; i < obj.length; i++) { 
    var id = i + 12; 
    id = 'field_' + id; 
    var field = newTextArea(id); 
    field.setValue(obj[i].value); 
    field.setVisible(true); 
    this.form.add(field); 
} 

this.form.doLayout();