javascript - 标记字段选择 e 取消选择 : how to add and remove dinammicaly fieldcontainers to form

Question

我需要通过大表单中的标记字段(多选)更改组合框(单选)。

已发出请求，以便每个标记字段项(汽车列表)可以与一个字段关联以输入每辆车的值。

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

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

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

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

第二个问题是收集每个字段容器的值(汽车名称和各自的价格值)并将它们一起发送到服务器端。

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() 或其他操作。