slow on setting radiofields values

[JanLoesbrock]

REQUIRED INFORMATION

Ext version tested:

• Sencha Touch 2.0.1.1
• Sencha Touch 2.1.0 beta3

Browser versions tested against:

• Chrome 21 (Linux)
• Android 2.2 / 2.3 / 4.0
• iOS 5 / 6

Description:

• Setting a form with radiofields is very slow

Steps to reproduce the problem:

• Build a formpanel with radiofileds and set the values with the setValues-function

The result that was expected:

• fast

The result that occurs instead:

• slow

Test Case:

Ext.define("MyTestApp.view.Main", { extend: 'Ext.form.Panel',
 requires: [
   'Ext.field.Radio'
 ],
config: {
   items: [{
    docked : 'top',
    xtype : 'titlebar',
    title : 'Radiofield',
    items : [{
        xtype : 'button',
        text : 'setValue to six',
        listeners: {
            tap: function (/*Ext.Button*/that, evt, eOpts) {
               console.log("Button tapped");
               var formpanel = this.up('formpanel');
               var startTime = (new Date()).getTime();
               formpanel.setValues({number : 'six'});
               var endTime = (new Date()).getTime();
               var duration = endTime - startTime;
               console.log('Duration: ' + duration);
            }
        }
    }]
   },
   {
    xtype : 'fieldset',
    defaults: {
        xtype: 'radiofield',
        name : 'number'
    },
    items : [
      { value: 'one', label: 'one' , checked : true},
      { value: 'two', label: 'two'},
      { value: 'three', label: 'three'},
      { value: 'four', label: 'four'},
      { value: 'five', label: 'five'},
      { value: 'six', label: 'six'},
      { value: 'seven', label: 'seven'},
      { value: 'eight', label: 'eight'},
      { value: 'nine', label: 'nine'},
      { value: 'ten', label: 'ten'},
      { value: 'eleven', label: 'eleven'},
      { value: 'twelve', label: 'twelve'}
    ]
   }
  ]
 }
});

Ext.define('Override.field.Radio', {
    override : 'Ext.field.Radio',
    // fixed in 2.1.0 beta3
    getValue: function() {
        return (this._value) ? this._value : null;
    },
});

Possible fix:

• add a 'break' in the setValues-function after f.setGroupValue(value), to leave the loop. This is possible because setGroupValue has still setted all radiofields with the same name.

• ...if (f.isRadio) { // If it is a radio field just use setGroupValue which will handle all of the radio fields
                                  f.setGroupValue(value);
                                  break; // <-- leave loop
                              } else if (f.isCheckbox) {...

Ext.define('Override.form.Panel', 7
    override : 'Ext.form.Panel',
    setValues: function(values) {
        var fields = this.getFields(),
              name, field, value, ln, i, f;
        values = values || {};
 
        for (name in values) {
            if (values.hasOwnProperty(name)) {
                field = fields[name];
                value = values[name];
                if (field) {
                    // If there are multiple fields with the same name. Checkboxes, radio fields and maybe event just normal fields..
                    if (Ext.isArray(field)) {
                        ln = field.length;
                        // Loop through each of the fields
                        for (i = 0; i < ln; i++) {
                            f = field[i];
                            if (f.isRadio) {
                                // If it is a radio field just use setGroupValue which will handle all of the radio fields
                                f.setGroupValue(value);
                                break; // <-- setGroupValues set the other radiofields, so we can leave the loop
                            } else if (f.isCheckbox) {
                                if (Ext.isArray(value)) {
                                   f.setChecked((value.indexOf(f._value) != -1));
                               } else {
                                   f.setChecked((value == f._value));
                               }
                            } else {
                                // If it is a bunch of fields with the same name, check if the value is also an array, so we can map it
                                // to each field
                                if (Ext.isArray(value)) {
                                    f.setValue(value[i]); 
                                }
                            }
                        }
                    } else {
                        if (field.isRadio || field.isCheckbox) {
                            // If the field is a radio or a checkbox
                            field.setChecked(value);
                        } else {
                            // If just a normal field
                            field.setValue(value);
                        }
                    }
                }
            }
        }

        return this;
    }
});

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

With your override, on my iPhone 4S It went from about 155-165ms to 10-15ms. We will look into this.

[rdougan]

Thanks for the fix.