Question

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

{
    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中创建这些项目需要花费超过250毫秒。因此，作为用户，我感觉有一些显着的延迟，并且看起来不太好。一个简单的组合加载大约半秒钟！我希望，我可以用一些属性加速这个过程（延迟：假或类似的东西）。但我不知道这样的财产是否存在。

Answer 1

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

当有人点击触发器时，ExtJS会对getPicker()进行第一次调用，但这并不意味着如果您真的想要，则无法提前调用它：

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

请注意，如果您有一个充满组合框的表单，并且在创建过程中对所有这些表单调用了getPicker，则表单呈现期间的延迟会很明显。

ExtJS 6.防止使用本地存储延迟呈现组合框

1 个答案: