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

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

2 个答案: