[4.2.0-489] Issues when adding items to a form.

[martin17]

REQUIRED INFORMATION

Ext version tested:

• ExtJS 4.2.0-489

Browser versions tested against:

• Chrome 25.0.1364.99
• FF 18.0.2
• Safari 6.0.2

Description:

• First of all, sorry for my English...
• When you dynamically add items to a form, they are ignored and not validated and neither are sent by the form. Also, event 'fieldvaliditychange' is not fired in fieldcontainer.

Steps to reproduce the problem:

• Complete all fields from Form.
• Add items to form.
• Click 'Validate'.
• Complete fields from the added items.
• Click 'OK'.

The result that was expected:

• When form is valid, button 'OK' is enabled.
• When items are added, button 'OK' is disabled (form invalid).
• When "Validate" is clicked, empty fields marked as invalid.
• When added fields are complete and valid, button 'add' is enabled (on filedvaliditychange).
• When 'OK' is clicked show values for all fields.

The result that occurs instead:

• When form is valid, button 'OK' is enabled.
• When items are added, form remains valid.
• 'Validate' show valid Form.
• When added fields are complete and valid, button 'add' is not enabled (filedvaliditychange not fired).
• When 'OK' is clicked show only values for original fields.

Test Case:

Ext.define('Testcase', {
    extend: 'Ext.form.Panel',
    frame: true,
    title: 'Form Validation in ExtJS 4.2-489 Test Case',
    margin: '15px',
    width: 800,
    fieldDefaults: {
        msgTarget: 'side'
    },
    config: {currentIndex: 0},
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            items: [
                {
                    xtype: 'fieldcontainer',
                    autoScroll: true,
                    defaults: {
                        margin: '5',
                        flex: 1
                    },
                    layout: {
                        align: 'stretchmax',
                        type: 'hbox'
                    },
                    fieldDefaults: {
                        msgTarget: 'side',
                        hideLabel: true
                    },
                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Datos del Tractor',
                            defaults: {
                                xtype: 'textfield',
                                anchor: '100%'
                            },
                            items: [
                                //me.buildCombos('tracPatente', null),
                                {
                                    xtype: 'textfield',
                                    allowBlank: false,
                                    name: 'MarcaTr',
                                    //    readOnly: true,
                                    emptyText: 'Marca',
                                    submitValue: false,
                                    itemId: 'btIngresosMarcaTr',
                                    fieldLabel: 'Marca'
                                },
                                {
                                    xtype: 'numberfield',
                                    allowBlank: false,
                                    name: 'ModeloTr',
                                    //    readOnly: true,
                                    submitValue: false,
                                    emptyText: 'Modelo',
                                    itemId: 'btIngresosModeloTr',
                                    fieldLabel: 'Modelo'
                                },
                                {
                                    xtype: 'numberfield',
                                    // allowBlank : false,
                                    name: 'taraT',
                                    allowDecimals: false,
                                    //    readOnly: true,
                                    itemId: 'btIngresosTaraTr',
                                    emptyText: 'Tara Tractor',
                                    fieldLabel: 'Tara'
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            title: 'Datos del Acoplado',
                            defaults: {
                                xtype: 'textfield',
                                anchor: '100%'
                            },
                            items: [
                                {
                                    xtype: 'textfield',
                                    allowBlank: false,
                                    name: 'PatAcoplado',
                                    //    readOnly: true,
                                    emptyText: 'Patente',
                                    submitValue: false,
                                    itemId: 'btIngresosPatAcoplado',
                                    fieldLabel: 'Patente'
                                },
                                {
                                    xtype: 'textfield',
                                    allowBlank: false,
                                    name: 'MarcaAc',
                                    //    readOnly: true,
                                    submitValue: false,
                                    emptyText: 'Marca',
                                    itemId: 'btIngresosMarcaAc',
                                    fieldLabel: 'Marca'
                                },
                                {
                                    xtype: 'numberfield',
                                    allowBlank: false,
                                    name: 'ModeloAc',
                                    submitValue: false,
                                    //    readOnly: true,
                                    emptyText: 'Modelo',
                                    itemId: 'btIngresosModeloAc',
                                    fieldLabel: 'Modelo'
                                },
                                {
                                    xtype: 'numberfield',
                                    // allowBlank : false,
                                    name: 'taraA',
                                    //    readOnly: true,
                                    itemId: 'btIngresosTaraAc',
                                    allowDecimals: false,
                                    emptyText: 'Tara Acoplado',
                                    fieldLabel: 'Tara'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'fieldcontainer',
                    autoScroll: true,
                    defaults: {
                        margin: '5',
                        flex: 1
                    },
                    layout: {
                        type: 'hbox',
                        pack: 'center',
                        align: 'middle'
                    },
                    fieldDefaults: {
                        msgTarget: 'side',
                        hideLabel: true
                    },
                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Empresa de Transporte',
                            defaults: {
                                xtype: 'textfield',
                                anchor: '100%'
                            },
                            items: [
                                {
                                    xtype: 'textfield',
                                    allowBlank: false,
                                    name: 'RazonSocial',
                                    submitValue: false,
                                    //    readOnly: true,
                                    emptyText: 'Razón social',
                                    itemId: 'btIngresosRazonSocial',
                                    fieldLabel: 'Razón social',
                                    validator: function (val) {
                                        if (val === 'NO ASIGNADO') {
                                            return 'Debe actualizar la empresa de transportes en el sistema. Hágalo y vuelva a seleccionar el camión';
                                        }
                                        if (this.getValue() !== "") {
                                            return true;
                                        }
                                        return 'La empresa de transportes no es válida';
                                    }
                                },
                                {
                                    xtype: 'numberfield',
                                    allowBlank: false,
                                    name: 'Cuit',
                                    submitValue: false,
                                    //    readOnly: true,
                                    emptyText: 'CUIT',
                                    itemId: 'btIngresosModeloAc',
                                    fieldLabel: 'CUIT'
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            title: 'Remitos',
                            hidden: true
                        }
                    ],


                }
            ],
            tbar: [
                {
                    xtype: 'button',
                    text: 'Add fieldset',
                    iconCls: 'icon-add',
                    itemId: 'btTicketAdd',
                    handler: function () {
                        var fieldset = me.addFieldSetRemitos(),
                            f = me.down('fieldset[title=Remitos]');
                        f.add(fieldset);
                        if (f.isHidden()) {
                            f.show();
                        }
                    }
                },
                {
                    xtype: 'button',
                    text: 'Validate',
                    iconCls: 'icon-to_do_list_cheked_all',
                    itemId: 'btTicketIngresoVerify',
                    handler: function () {
                        var form = me.getForm(), fields, msg, owner, err, div, cleanErr;
                        if (form.isValid()) {
                            Ext.Msg.alert('Estado de Formulario',
                                'El formulario es válido, puede generar el ingreso',
                                function () {
                                    ingresoCtrlBtns.Save.enable();
                                });
                        } else {
                            fields = form.getFields();
                            msg = '';
                            Ext.each(fields.items, function (obj, index) {
                                if (!obj.isValid()) {


                                    if (obj.up('fieldset')) {
                                        owner = obj.up('fieldset').title + '->';
                                    } else if (obj.up('panel')) {
                                        if (obj.up('panel').title) {
                                            owner = obj.up('panel').title
                                                + '->';
                                        } else {
                                            owner = '';
                                        }
                                    }
                                    err = obj.getActiveError();
                                    div = document.createElement("div");
                                    div.innerHTML = err;


                                    cleanErr = div.textContent || div.innerText;
                                    msg += owner + obj.fieldLabel + ': ' + cleanErr
                                        + '<br>';


                                }
                            });


                            Ext.Msg.alert('Estado de Formulario', msg);
                        }
                    }
                }
            ],
            buttons: [
                {
                    xtype: 'button',
                    text: 'OK',
                    iconCls: 'icon-large-accept',
                    scale: 'large',
                    // disabled : true,
                    formBind: true,
                    itemId: 'btTicketIngresoSave',
                    handler: function(){
                        var form = me.getForm(), fields, msg, owner, err, div, cleanErr;


                        fields = form.getFields();
                        msg = '';
                        Ext.each(fields.items, function (obj, index) {
                                if (obj.up('fieldset')) {
                                    owner = obj.up('fieldset').title + '->';
                                } else if (obj.up('panel')) {
                                    if (obj.up('panel').title) {
                                        owner = obj.up('panel').title
                                            + '->';
                                    } else {
                                        owner = '';
                                    }
                                }
                                msg += owner + obj.emptyText + ': ' + obj.getValue()
                                    + ' <br>';


                        });


                        Ext.Msg.alert('Values to Send', msg);
                    }
                },
                {
                    xtype: 'button',
                    text: 'Cancel',
                    iconCls: 'icon-large-cross',
                    scale: 'large',
                    // disabled : true,
                    handler: function () {
                        me.down('fieldset[title=Remitos]').removeAll();
                        me.down('fieldset[title=Remitos]').hide();
                        me.setCurrentIndex(0);
                        me.getForm().reset();
                    },
                    itemId: 'btTicketIngresoCancel'
                }
            ]
        });
        me.callParent(arguments);
    },
    addFieldSetRemitos: function () {
        var me = this,
            index = me.getCurrentIndex(),
            num = me.getCurrentIndex() + 1,
            output = {
                xtype: 'fieldcontainer',
                layout: {
                    type: 'hbox'
                },
                labelWidth: 20,
                hideLabel: false,
                itemId: 'container_' + num,
                action: 'remitosContainer',
                defaults: {
                    flex: 1,
                    hideLabel: true,
                    allowBlank: false,
                    xtype: 'numberfield'
                },
                fieldLabel: num,
                items: [
                    {
                        name: 'remitos[' + index + ']',
                        emptyText: 'NºRemito...',
                        fieldLabel: 'Nº Remito',
                        itemId: 'remito' + num,
                        minValue: 0,
                        allowBlank: false,
                        tooltip: 'Ingrese el Nº de Remito'
                    },
                    {
                        name: 'pesoRemitos[' + index + ']',
                        itemId: 'pesoRemito' + num,
                        fieldLabel: 'Kg. en Remito',
                        minValue: 0,
                        emptyText: 'Kgs...',
                        allowBlank: false,
                        tooltip: 'Ingrese el Peso declarado en el Remito'
                    },
                    {
                        xtype: 'button',
                        flex: 0,
                        text : 'add',
                        iconCls: 'icon-add',
                        tooltip: 'Agregar un nuevo remito',
                        itemId: 'btIngresosRemitoAdd_' + num,
                        disabled: true,
                        listeners: {
                            'click': function (btn) {
                                var f = btn.up('fieldset[title=Remitos]'), fieldset = me.addFieldSetRemitos();
                                f.add(fieldset);
                                btn.up('fieldcontainer[itemId=container_' + num + ']').down('[itemId=btIngresosRemitoAdd_' + num + ']').hide();
                                btn.up('fieldcontainer[itemId=container_' + num + ']').down('[itemId=btIngresosRemitoDelete_' + num + ']').hide();
                            }
                        }
                    },
                    {
                        xtype: 'button',
                        flex: 0,
                        iconCls: 'icon-delete',
                        text: 'delete',
                        tooltip: 'Cancelar',
                        itemId: 'btIngresosRemitoDelete_' + num,
                        hidden: !!((num === 1)),
                        listeners: {
                            'click': function (btn) {
                                var f = btn.up('fieldset[title=Remitos]'), field = btn.up('fieldcontainer[itemId=container_' + num + ']');
                                f.remove(field);
                                me.setCurrentIndex(num - 1);
                                f.down('fieldcontainer[itemId=container_' + index + ']').down('[itemId=btIngresosRemitoAdd_' + index + ']').show();
                                if (index > 1) {
                                    f.down('fieldcontainer[itemId=container_' + index + ']').down('[itemId=btIngresosRemitoDelete_' + index + ']').show();
                                }
                            }
                        }
                    }
                ],
                listeners: {
                    'fieldvaliditychange': function (f, field, valid) {
                        Ext.Msg.alert('fieldvaliditychange', 'Event fieldvaliditychange fired!');
                        if (f.down('[itemId=remito' + num + ']').isValid() && f.down('[itemId=pesoRemito' + num + ']').isValid()) {
                            f.down('[itemId=btIngresosRemitoAdd_' + num + ']')
                                .enable();
                        } else {
                            f.down('[itemId=btIngresosRemitoAdd_' + num + ']')
                                .disable();
                        }
                    }
                }
            };


        me.setCurrentIndex(num);
        return output;
    }
});


Ext.onReady(function () {
    var formPanel = Ext.create('Testcase');
    formPanel.render(document.body);
});

[evant]

Thanks for the test case, we have this one already resolved for the next release.