ExtJs 5 slowly form binding

Question

I have problem with form panel and binding modelView in ExtJS 5. When form panel after render, values set slowly.

Example in fiddle

Answer 1

This is because the browser is doing a complete layout reflow when changing a Label field (which your WizardOrderRowDisplayField is extending). The Label is not really meant to display changing values. Therefore, the implementation is a bit simplistic. When changing the value it injects new DOM content into the page. When changing DOM content, the browser will need to reflow.

Now, because the ViewModel causes quick updates to multiple Label fields, every single update causes a reflow. So when updating 30 fields, it will reflow 30 times which takes time.

If you change the WizardOrderRowDisplayField to extend Ext.form.field.Text, making it readOnly and changing the layout a bit so that it looks like a label field, you have the same functionality and your issue is solved:

Ext.define('Ftp.view.wizard.order.WizardOrderRowDisplayField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.wizard-order-row-calcfield',
    width: 100,
    readOnly: true,
    cls: 'wizard-order-row-calcfield' // Use this to remove the border etc in SASS
});

Good luck