Json 在extjs中向面板动态添加文本字段

我有一个面板，我希望在“hbox”布局中为json数据中的每个条目添加两个文本字段。
例如：假设我有这样一个json：

{
    ..
    ids : [
        {
            'name' : 'first name',
            'surname' : 'first surname',
        },
        {
            'name' : 'second name',
            'surname' : 'second surname'
        }
    ]
}

在本例中，面板将由两行两个文本字段组成，每个文本字段的标签分别为“name”和“姓氏”

因此，在for循环中，我需要知道如何在面板内的“hbox”布局中插入两个文本字段。如果它是一个网格，将很容易添加到商店中

以下是我所做的

Ext.getCmp('panelid').items.add(Ext.create('Ext.container.Container', {
                                        layout: {
                                            type: 'hbox'
                                        },
                                        defaults: {
                                            bodyPadding: 10,
                                            margin: '10 0 10 10',
                                            height: 100
                                        },
                                        items: [
                                        {
                                            fieldLabel: 'Name',
                                            id: 'idFieldName',
                                            name : 'Data',
                                            margin:'0 10 10 0',
                                            width:225,
                                            labelWidth: 40
                                        },
                                        {
                                            fieldLabel: 'Datatype',
                                            name : 'Type',
                                            id: 'idFielddataType',
                                            margin: '0 10 10 0',
                                            width:225,
                                            labelWidth:55
                                        }
                                        ]
                                    }));

EDIT1:添加了我的进度

EDIT2:我找到了问题的一半解决方案。问题是我不需要添加到项目中，而是可以添加到面板本身。所以这是可行的：

Ext.getCmp('panelid').add(....)

但现在的问题是，在循环的第二次迭代中，下一个hbox格式的文本字段位于现有字段的顶部，即，不是在这一行下面添加行，而是在面板顶部添加行。请告知如何解决此问题

编辑3: 我已经找到了解决方案，解释了为什么要在现有元素的基础上添加元素。这是因为每当我在循环中添加元素时，添加元素的id都是相同的。因此，实际上它是在替换我在上一次迭代中已经输入的两个文本字段

因此，我刚刚更改了id名称，如下所示：

id: 'idFieldName' + i

---

我认为您应该使用“form”布局（或Ext.form.Panel），并使用Ext.form.FieldContainer对2个文本字段进行分组。 例如：

Ext.create('Ext.form.Panel', {
    title: 'FieldContainer Example',
    width: 550,
    bodyPadding: 10,

    items: [
        {
            xtype: 'fieldcontainer',
            fieldLabel: 'first line',
            labelWidth: 100,
            layout: 'hbox',
            items: [{
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'textfield',
                flex: 1
            }]
        },
        {
            xtype: 'fieldcontainer',
            fieldLabel: 'second line',
            labelWidth: 100,
            layout: 'hbox',
            items: [{
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'textfield',
                flex: 1
            }]
        }
    ]
});

如果要动态执行，可以执行以下操作：

Ext.create('Ext.form.Panel', {
    title: 'FieldContainer Example',
    width: 550,
    bodyPadding: 10,

    addRow : function(rowLabel) {
        this.add({
            xtype: 'fieldcontainer',
            fieldLabel: rowLabel,
            labelWidth: 100,
            layout: 'hbox',
            items: [{
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'textfield',
                flex: 1
            }]
        });
    }
});

然后在循环中，您可以使用：

myPanel.addRow('test');

---

您在本例中使用的ExtJS版本是什么？3、4还是5？我这样问是因为问题的解决方案（或多或少）取决于版本

编辑

---

看来你找到了解决办法。我不知道您是否在视图中执行此操作，但如果是这样，您应该使用链接到该特定视图的控制器。通过这种方式，您的代码将看起来更好、更清晰，另一个重要原因是，以下版本的ExtJS（5）使用这种结构。

您也应该为每个字段使用不同的名称，以便以后能够检索表单值

name: 'Data' + i

编辑

此外，我将使用itemId而不是id，如下所述：

然后，您可以使用Ext.ComponentQuery.query（..）通过组件的itemId获取组件：

---

向我们展示你迄今为止所做的努力。@RianSchmits我已经编辑了这篇文章。请检查您是否忘记了动态部分。我已经在页面上有了一个面板，我需要根据json数据中的字段数量在hbox布局中添加两个文本字段。您是否建议我在运行时完全添加面板，而不是在之前创建面板，然后在其中添加容器？你也能解释一下你为什么这样想吗？获取面板id并向其项目列表中添加一个容器，这是我的概念错误吗？不，您使用了正确的概念（创建一个面板，然后使用add方法插入新元素）。这只是一个布局问题，以您想要的方式显示元素。我已经用动态项更新了我的示例。要访问您的面板，您可以使用

Ext.getCmp（'panelid'）

，或者如果您在控制器中，则使用ref，这是一种更好的做法。（有关Ext.app.Controller的帮助，请参阅API中的“使用引用”部分）。我找到了解决方案，解释了为什么我现有的文本字段被新的文本字段所取代。我已经更新了帖子。我已经用这个解决方案更新了帖子。但是谢谢你的帮助。