ExtJS 6.防止延迟呈现具有本地存储的组合框

ExtJS 6. Prevent deferred rendering of comboboxes with local store

本文关键字：存储 组合 延迟 ExtJS      更新时间：2023-09-26

我有一个简单的组合框，实例化如下:

{
    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"}
        ]
    })
}

当我第一次展开(或点击下拉箭头)这个组合框时，我在检查器中看到，在页面的DOM结构中出现了许多新项目，如:

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

问题是，在DOM中创建这些项目需要花费超过250ms的时间。所以，作为一个用户，我感觉有些明显的延迟，而且看起来不太好。一个简单的组合加载大约半秒!我希望，我可以加快这个过程与一些属性(延迟:false或类似的东西)。但我不知道这样的属性是否存在

A - combobox是一种特殊类型的pickerfield。pickerfield有一个函数getPicker()，它将尝试获取现有的选择器，如果它不存在，它将创建选择器的组件。

ExtJS在有人点击触发器时第一次调用getPicker()，但这并不意味着你不能更早地调用它，如果你真的想:

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

请注意，如果您有一个充满组合框的表单，并且在创建期间对所有组合框调用getPicker，那么在表单呈现期间延迟将是明显的。

相关文章：