CODEWITHSUNDEEP
javascriptextjs
Jacobian
Jacobian

Reputation: 10872

ExtJS 6. Prevent deferred rendering of comboboxes with local store

I have a simple combobox which is instantiated like so:

{
    xtype: "combobox",
    emptyText: "Geometry",
    queryMode: "local",
    displayField: "name",
    valueField: "id",
    forceSelection: true,   
    allowBlank: false,  
    itemId: "GeometryType", 
    value: "1",
    store: Ext.create("Ext.data.Store",{
        fields: ["id", "name"],
        data: [
            {"id": "1", "name": "Point"},                                
            {"id": "2", "name": "LineString"},
            {"id": "3", "name": "Circle"},
            {"id": "4", "name": "Box"},
            {"id": "5", "name": "Polygon"}
        ]
    })
}

When I expand (or hit the dropdown arrow) this combobox for the first time, I see in the inspector, that in the DOM structure of the page appear a number of new items like:

<div class="x-boundlist x-boundlist-floating x-layer x-boundlist-default x-border-box" style="width: 388px; right: auto; left: 6px; top: 183.5px; height: auto; z-index: 19000;" id="boundlist-1245" tabindex="-1" data-componentid="boundlist-1245">
<div id="boundlist-1245-listWrap" data-ref="listWrap" class="x-boundlist-list-ct x-unselectable" style="overflow: auto; height: auto;">
<ul id="boundlist-1245-listEl" data-ref="listEl" class="x-list-plain" role="listbox" aria-hidden="false" aria-disabled="false">
<li role="option" unselectable="on" class="x-boundlist-item x-boundlist-selected" tabindex="-1" data-recordindex="0" data-recordid="10" data-boundview="boundlist-1245" id="ext-element-26">Point</li>
...</ul>
</div>
</div>

The problem is that it takes much more than 250ms to create these items in the DOM. So, I, as a user, feel some significant delay and it does not looks good. A simple combo loading for about half of a second! I hope, I can speed up this process with some property (deferred: false or something like that). But I do not know whether such a property exists.

Upvotes: 1

Views: 219

Answers (1)

Alexander
Alexander

Reputation: 20244

A combobox is a special kind of pickerfield. A pickerfield has a function getPicker() that will try to get the existing picker, and if it doesn't exist, it creates the component of the picker.

ExtJS does the first call to getPicker() when someone clicks on the trigger, but that doesn't mean that you couldn't call it earlier if you really wanted to:

var combo = Ext.widget({
    ...
});
combo.getPicker();

Please note that if you have a form full of comboboxes, and you call getPicker on all of them during creation, the delay would be noticeable during form rendering.

Upvotes: 2

Related Questions