Adding text area dynamically to container extjs

Question

I am facing problem in adding text area to container dynamically.

Initial creation of container:

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

Dynamic code:

 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 to create text area:

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;
}

Problem:

When i debug and see form, textarea is added in form items but its not displayed in the browser. Can someone suggest what to do?

Regards,

Raj

Answer 1

Check this simple fiddle.

Not sure what is wrong with your code, you dont mention what is obj and I think that this.form is wrong reference to the container. I think you can to use Ext.ComponentQuery.query or something similar (like up and down methods for queryable components).

Answer 2

In extjs 3.x, you have to call doLayout after adding items to a container.

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