コンテナextjsに動的にテキスト領域を追加

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など（upとdownの方法のqueryableコンポーネントのような）を使用することができます。

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();