Question

我有一个面板，我希望在＆＃39; hbox＆＃39;中添加两个文本字段。 json数据中每个条目的布局对于例如：假设我有一个像这样的json：

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

在此示例中，面板将由两行两个文本字段组成，每个文本字段的标签为＆＃39; name＆＃39;和＆＃39;姓氏＆＃39;

所以在for循环中我需要知道如何在＆＃39; hbox＆＃39;中插入两个文本字段。面板内部的布局。如果它是一个网格，很容易添加到商店。

这就是我所做的。

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格式的文本字段位于现有的文本字段的TOP上，即，不是在该行下方添加一行，而是添加在面板的顶部。请建议如何摆脱这个问题。

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

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

id: 'idFieldName' + i

Answer 1

我认为你应该使用＆＃34;表格＆＃34;而不是布局（或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');

Answer 2

您在此示例中使用的是什么版本的ExtJS？ 3,4或5？我问这个是因为根据版本更改问题的解决方案（或多或少）。

修改

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

Answer 3

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

name: 'Data' + i

修改

此外，我会使用itemId而不是id，如下所述：https://stackoverflow.com/a/18472598/2085604

然后，您可以使用Ext.ComponentQuery.query（..）通过其itemId获取组件： https://stackoverflow.com/a/24407896/2085604

将文本字段动态添加到extjs

3 个答案: