多选组合框性能问题 (ExtJS 7.3)答案

【问题标题】：Multieselect Combobox performance issues (ExtJS 7.3)多选组合框性能问题 (ExtJS 7.3)
【发布时间】：2021-05-01 06:29:08
【问题描述】：

我的多选组合框出现一些性能问题。组合框包含大约 2000 个条目，激活后，渲染/展开大约需要 2 秒。

示例：https://fiddle.sencha.com/#fiddle/3bfv&view/editor

有人知道如何提高性能或更好地使用此控件吗？

问候乔纳森

【问题讨论】：

标签： extjs combobox multi-select extjs7

【解决方案1】：

很遗憾，显示的列表不能是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>

您可以使用“选择”字段的floatedPicker（以及用于小型设备的edgePicker）配置（另请参阅picker）。

可以制作更简单的 DOM 节点：

itemTpl: '{name}', // removes 2000 spans
floatedPicker: {
  itemConfig: {
    xtype: 'component' // removes 12.000 divs
  }
}

肯定有更多的优化可以减少显示时间。例如，第一次渲染会持续几秒钟。可能是模型创建、收集/存储操作、触发的事件太多……

【讨论】：

【解决方案2】：

有了这么多选择，前端的代码就会膨胀。我会尝试将自动选择与组合框挂钩。我为邮政编码选择框做了类似的事情。您无需列出美国的 45K 邮政编码，而是让用户自己减少选择。

          {
                xtype: 'combobox',
                id: 'zipCodeComboId',
                label: 'select zip code',
                queryMode: 'remote',
                displayField: 'zipCode',
                valueField: 'zipCode',
                value: '000',
                height:50,
                forceSelection: true,
                typeAhead: false,
                minChars: 3,
                store: {
                    type: 'zipCodes'
                }
            }

您的商店可能看起来像：

Ext.define('yourapp.store.ZipCodes', {
extend: 'Ext.data.Store',

alias: 'store.zipCodes',

model: 'yourapp.model.ZipCodes',
storeId: 'zipCodesStoreId',
autoLoad: false,
idProperty: 'zipCode',
fields: [
    'zipCode', 'city', 'state', 'updatedDt'
],
proxy: {
    type: 'ajax',
    url: '/searchYourZipCodes',
    reader: {
        type: 'json',
        rootProperty: 'values'
    }
},

});

【讨论】：