Multieselect Combobox performance issues (ExtJS 7.3)

Question

I am experiencing some performance issues with my multiselect combobox. The combobox is filled with around 2000 entries and when activated, it takes almost 2 seconds to render/expand.

Example: https://fiddle.sencha.com/#fiddle/3bfv&view/editor

Does someone know how to improve the performance or a better usage of this control?

Regards Jonathan

question from:https://stackoverflow.com/questions/65918851/multieselect-combobox-performance-issues-extjs-7-3

Answer 1

Unfortunately, the displayed list cannot be infinite which would have make it quickly displayed.

I would suggest to use combobox field with remote loading if you have a large number of entries.

Now, if you look at the generated DOM nodes for the picker, there may be some useless things.

For each item, you are getting :

<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>

You can play with the floatedPicker (and edgePicker for small devices) config of the Select field (See also picker).

It is possible to make simplier DOM nodes :

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

There are surely more optimizations that could be done to reduce the display time. For example, the first render lasts some seconds. It may be Models creation, collection/store operations, too many events fired, ...