extjs - 多选组合框性能问题 (ExtJS 7.3)
问题描述
我的多选组合框遇到了一些性能问题。组合框填充了大约 2000 个条目,激活后,渲染/展开大约需要 2 秒。
示例:https ://fiddle.sencha.com/#fiddle/3bfv&view/editor
有人知道如何提高性能或更好地使用此控件吗?
问候乔纳森
解决方案
不幸的是,显示的列表不能infinite
使其快速显示。
如果您有大量条目,我建议将组合框字段与远程加载一起使用。
现在,如果您查看为选取器生成的 DOM 节点,可能会有一些无用的东西。
对于每个项目,您将获得:
<div id="ext-simplelistitem-1" data-componentid="ext-simplelistitem-1" class="x-listitem x-component x-boundlistitem x-layout-auto-item x-first" data-xid="7" data-viewid="ext-boundlist-1" data-recordindex="0" data-recordid="1">
<div class="x-body-el x-listitem-body-el x-component-body-el" id="ext-element-24">
<div class="x-tool-dock x-listitem-tool-dock x-component-tool-dock" id="ext-element-28">
<div class="x-tool-zone x-start" id="ext-element-27">
<div id="ext-tool-1" data-componentid="ext-tool-1" class="x-tool x-component x-disabled x-passive x-selected-icon x-tool-listitem x-component-listitem x-start" data-xid="8">
<div class="x-icon-el x-font-icon x-fa fa-check" id="ext-element-26"></div>
</div>
</div>
<div class="x-inner-el x-listitem-inner-el x-component-inner-el x-tool-anchor" id="ext-element-25">
<div class="x-innerhtml" id="ext-element-29"><span class="x-list-label">Alabama</span></div>
</div>
</div>
</div>
</div>
您可以使用 Select 字段的floatedPicker
(以及edgePicker
小型设备)配置(另请参阅picker
)。
可以制作更简单的 DOM 节点:
itemTpl: '{name}', // removes 2000 spans
floatedPicker: {
itemConfig: {
xtype: 'component' // removes 12.000 divs
}
}
肯定有更多的优化可以减少显示时间。例如,第一次渲染会持续几秒钟。可能是模型创建、收集/存储操作、触发的事件太多……
推荐阅读
- python - 为什么来自 .NET MVC 的请求不起作用?
- typescript - 正确处理 TypeScript 的弱类型检测
- spring - 没有 SimpleDiscoveryClient 类型的限定 bean
- python - 如何在 Django 中使用有关对象修改的数据?
- c# - 正则表达式在 VS Finder 中查找没有 ConfigureAwait(false) 的异步方法
- java - 服务标识
- newrelic - 当百分比在设定的时间范围内低于一定数量时,如何使用 newrelic NRQL 发出警报
- javascript - 有没有办法让这个顶级代码同步
- arrays - 是否可以只遍历 C 数组中分配的元素?
- webpack - 有没有办法在 Vue 配置中以对象数组的形式提供条目?