Success! Looks like we've fixed this one. According to our records the fix was applied for a bug in our system in a recent build.
  1. #1
    Sencha User martin17's Avatar
    Join Date
    May 2008
    Location
    Argentina
    Posts
    10
    Vote Rating
    0
    martin17 is on a distinguished road

      0  

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

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


    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:


    Code:
    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);
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,895
    Vote Rating
    623
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Thanks for the test case, we have this one already resolved for the next release.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1

Tags for this Thread