ExtJs 5缓慢形成绑定 [英] ExtJs 5 slowly form binding

问题描述

我在ExtJS 5中有表单面板和绑定模型视图的问题。
渲染后的表单面板时，值设置缓慢。

小提琴示例 p>

解决方案

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

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

如果您更改了WizardOrderRowDisplayField以扩展Ext.form.field.Text，使其只读并稍微更改布局以使其看起来像标签字段，

  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'//使用这个来删除SASS 
}）中的边框等等; 
  

祝您好运

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

Example in fiddle

解决方案

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

这篇关于ExtJs 5缓慢形成绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！