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

Posted 2023-02-22

【中文标题】将 extjs 项动态添加到字段容器

【英文标题】：Dynamically adding extjs items to field container

【发布时间】：2012-03-12 22:09:34

【问题描述】：

我正在为我的应用程序使用 extjs 字段容器，其中我在表单中有详细信息、资金、家属部分。在资金和家属部分，我有一个“添加另一个”按钮，用于在每次单击按钮时添加一个新行项目。

这是我创建的表格 http://jsbin.com/evevod/4/edit

我是 extjs4 的新手。谁能帮我如何在点击时动态创建一个项目？

【参考方案1】：

以下是示例处理程序。

handler: function() 
    var container = this.up('fieldset');
    var config = Ext.apply(, container.initialConfig.items[0]);
    config.fieldLabel = container.items.length + 1;
    container.add(config);

基本上它找到包含行的父组件（即字段集），访问initialConfig属性，在其中找到第一行配置（items[0]），制作配置的浅表副本（Ext.apply）并将其添加到容器中(container.add)。

工作样本：http://jsbin.com/evevod/6/edit#preview

【讨论】：

谢谢，正是我想要的。

嗨，我在应用程序中实现了相同的功能，但遇到了一个问题。我们是否可以默认将 ID 分配给依赖项和基金的字段，并在点击“添加另一个”按钮（依赖项和基金）项目时为所有依赖项和基金字段动态生成一个新的 ID。例如我们有 title1、fname1、lname1 作为初始字段集，我们希望 title2、fname2、lname2、title3、fname3、lname3 等作为附加字段的 ID

您可以直接在处理程序中更改名称，也可以创建一些函数来为新行创建配置。例如here 我已经创建了getDepConfig 函数。

【参考方案2】：

我们可以像这样更改字段的名称：

var container = this.up('fieldset'); 
var config = Ext.apply(, container.initialConfig.items[0]);
config.fieldLabel = container.items.length+1;
config.items[0].name = 'fname' + config.fieldLabel;
config.items[1].name = 'lname' + config.fieldLabel;
config.items[2].name = 'title' + config.fieldLabel;