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

Posted

技术标签:

【中文标题】将文本区域动态添加到容器 extjs【英文标题】:Adding text area dynamically to container 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 或类似的东西(例如updown 可查询组件的方法)。 【参考方案1】:

检查这个simple fiddle。

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

【讨论】:

【参考方案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的主要内容,如果未能解决你的问题,请参考以下文章

为啥tinymce没有出现在动态添加的文本区域

将 extjs 项动态添加到字段容器

jQuery datepicker 在 IE9 中不工作并添加了动态文本区域

将文本区域中的 <br /> 替换为行分隔符(Javascript)

单击时在 Java 中添加类似动态文本区域的对象

向 html 文本区域添加换行符