将文本区域动态添加到容器 extjs答案

【问题标题】：Adding text area dynamically to container extjs将文本区域动态添加到容器 extjs
【发布时间】：2016-12-30 07:13:10
【问题描述】：

我在动态向容器添加文本区域时遇到问题。

容器的初始创建：

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 会添加到表单项中，但不会显示在浏览器中。有人可以建议做什么吗？

问候，

拉吉

【问题讨论】：

动态代码执行的位置和范围是什么？不确定“this.form”是引用容器的正确方法..
@scebotari 动态代码在范围内执行，如果我使用渲染：true，EL is undefined 错误即将到来。
检查这个简单的小提琴 - fiddle.sencha.com/#view/editor&fiddle/1ne5。不确定您的代码有什么问题，您没有提到 obj 是什么，我认为 this.form 是对容器的错误引用。我认为您可以使用Ext.ComponentQuery.query 或类似的东西（例如up 和down 可查询组件的方法）。

标签： javascript extjs extjs4 extjs3

【解决方案1】：

检查这个simple fiddle。

不确定您的代码有什么问题，您没有提到 obj 是什么，我认为 this.form 是对容器的错误引用。我认为您可以使用Ext.ComponentQuery.query 或类似的东西（例如queryable 组件的up 和down 方法）。

【讨论】：

【解决方案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();

【讨论】：