CODEWITHSUNDEEP
javascriptformsextjsextjs5
jose
jose

Reputation: 1562

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

I need to change a combox (single selection) by a tagfield (multiselect) in a big form.

A request was made so that each tagfield item (list of cars) could be associated with a field to enter the value of each car.

What is the best solution to solve this question?

One possible solution is that it is exemplified in the fiddle that follows.

Whenever the user selects a tagfield item, a fieldecontainer with two textfields is dynamically added to the fom: the first one having the same name as the selected tagfield item and the second is for the car value.

My first problem to solve is: when a tagfield list item is deselected remove the corresponding fieldcontainer.

The second problem is to collect the values of each fieldcontainer (car name and respective price value) and send them together to the server side.

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

Upvotes: 1

Views: 1076

Answers (1)

zeke
zeke

Reputation: 3663

I'd just assign the field containers to a hash or something as I added them and then hide them as necessary.

        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();
        }

To send all of the values to the server just do a this.up('form').getForm().submit() or whatever.

Upvotes: 1

Related Questions