ExtJs 5慢慢形成结合

Posted 2021-05-06

我在ExtJS 5中遇到表单面板和绑定modelView的问题。渲染后的表单面板，值设置缓慢。

Example in fiddle

答案

这是因为在更改Label字段（WizardOrderRowDisplayField正在扩展）时，浏览器正在执行完整的布局重排。标签并不真正意味着显示不断变化的值。因此，实现有点简单。更改值时，它会将新DOM内容注入页面。更改DOM内容时，浏览器需要重排。

现在，因为ViewModel会导致快速更新多个Label字段，所以每次更新都会导致重排。因此，当更新30个字段时，它将回流30次，这需要时间。

如果您更改WizardOrderRowDisplayField以扩展Ext.form.field.Text，使其成为readOnly并稍微更改布局以使其看起来像标签字段，则您具有相同的功能并且您的问题已解决：

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

祝好运