Tagfield select e deselect：如何添加和删除动态字段容器以形成

Question

我需要在大表单中通过标签字段（多选）更改组合框（单选）。

已提出请求，以便每个标记字段项（汽车列表）都可以与一个字段相关联以输入每辆汽车的值。

解决这个问题的最佳方案是什么？

一个可能的解决方案是在下面的fiddle中举例说明。

每当用户选择一个标签字段项时，就会将一个包含两个文本字段的字段容器动态添加到表单中：第一个与所选标签字段项同名，第二个用于汽车值。

我要解决的第一个问题是：当取消选择标记字段列表项时，删除相应的字段容器。

第二个问题是收集每个fieldcontainer的值（车名和各自的价格值）一起发送到服务器端

FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/1s6e

Answer 1

我只是在添加字段容器时将它们分配给散列或其他东西，然后根据需要隐藏它们。

        beforeselect: function (combo, record, eOpts) {
            var valueTagItem = record.get('name', this);

            if (!Ext.isDefined(this.carFields)) {
                this.carFields = {};
            }

            if (!Ext.isDefined(this.carFields[valueTagItem])) {
                this.carFields[valueTagItem] = this.up('form').add({
                    xtype: 'fieldcontainer',
                    padding: '7 0 7 0',
                    defaults: {
                        hideLabel: true,
                    },
                    layout: {
                        type: 'hbox',
                        align: 'strech'
                    },

                    items: [{
                        xtype: 'textfield',
                        name: 'text',
                        value: valueTagItem,
                        editable: false,
                        padding: '0 3 5 0',
                        flex: 1
                    }, {
                        xtype: 'textfield',
                        name: 'value',
                        emptyText: 'car value',
                        submitEmptyText: false,
                        allowBlank: false,
                        minWidth: 100,
                        flex: 0.5
                    }]
                });
            }
            this.carFields[valueTagItem].show();
        },
        beforedeselect: function (combo, record, index, eOpts) {
            var valueTagItemdeselect = record.get('name', this);
            this.carFields[valueTagItemdeselect].hide();
        }

要将所有值发送到服务器，只需执行 this.up('form').getForm().submit() 或其他任何操作。

Tagfield select e deselect：如何添加和删除动态字段容器以形成

Tagfield select e deselect: how to add and remove dinammicaly fieldcontainers to form

javascript

forms

extjs

extjs5