将文本字段动态添加到 extjs 中的面板

Posted 2023-02-23

【中文标题】将文本字段动态添加到 extjs 中的面板

【英文标题】：Dynamically add Text Fields to a Panel in extjs

【发布时间】：2015-07-17 21:49:42

【问题描述】：

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

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

在此示例中，面板将包含两行，每行两个文本字段，标签分别为“姓名”和“姓氏”

所以在 for 循环中，我需要知道如何在 Panel 内的“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

【问题讨论】：

向我们展示您迄今为止的尝试。

@RianSchmits 我已经编辑了帖子。请检查

【参考方案1】：

你在这个例子中使用的是什么版本的 ExtJS？ 3、4 还是 5？我问这个是因为根据版本（或多或少）改变你的问题的解决方案。

编辑

您似乎找到了解决方案。我不知道您是否在视图中执行此操作，但如果是这种情况，您应该使用链接到该特定视图的控制器。这样你的代码会更好看，更清晰，还有一个重要的原因，ExtJS(5)的以下版本，使用了这种结构。

【参考方案2】：

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

name: 'Data' + i

编辑

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

然后您可以使用 Ext.ComponentQuery.query(..) 通过 itemId 获取组件： https://***.com/a/24407896/2085604

【讨论】：

我已经用这个解决方案更新了我的帖子。但感谢您的帮助。

【参考方案3】：

我认为您应该改用“表单”布局（或 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');

【讨论】：

您忘记了动态部分。我已经在页面上有一个面板，我只需要在 hbox 布局中添加两个文本字段，具体取决于 json 数据中的字段数。您是否建议不要在之前创建面板然后在其中添加容器，而是希望我在运行时完全添加面板？您能否详细说明您为什么会这样想？我得到面板的 id 并将容器添加到其项目列表中是我的概念错误吗？

不，您使用了正确的概念（创建一个面板，然后使用 add 方法插入新元素）。这只是以您想要的方式显示元素的布局问题。我已经用动态项目更新了我的示例。

要访问您的面板，您可以使用Ext.getCmp('panelid')，或者如果您在控制器中，请使用 ref，这是一种更好的做法。 （参见 Ext.app.Controller 的 API 中的“使用引用”部分）。

感谢您的帮助。我找到了为什么我现有的文本字段被新的文本字段替换的解决方案。我已经更新了帖子。