组合框 ExtJs 的不需要的行为

unwanted behavior of combo box ExtJs

本文关键字：不需要 组合 ExtJs      更新时间：2023-09-26

有组合框和关联的商店，如果存储中没有用户输入的值的条目，则重置一切是正确的，但是如果用户输入一个值，则有一个令人不快的功能在商店，但他会在存储没有时间加载时快速完成，输入值将被重置。

如果用户没有等到存储加载(如果输入的值在存储中(，则当用户移动到另一个表单字段时，如何不重置用户输入的值

var bik = new Ext.form.ComboBox({
        store: storeBik,
        displayField: 'BANK_NAME',
        fieldLabel: 'БИК',
        name: 'BIK',
        hiddenName: 'BIK',
        valueField:'BIK',
        typeAhead: true,
        forceSelection:true,
        selectOnFocus:true,
        triggerAction: 'all',
        minChars : 1,
        mode: 'remote'
        resizable : true,
        validator : validBik,
        tpl: new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item"><b>{BIK} </b> {BANK}</div></tpl>')
    });

发生这种情况的原因是因为您打开了forceSelection .模糊后，ComboBox尝试在存储中为键入的值找到合适的记录。如果此类记录不存在，则会重置值。

我可以想到2个解决方案：

  • 关闭forceSelection
  • 扩展ComboBox

我看到您附加了validBik验证器。如果您可以在客户端验证值，请关闭forceSelection，您将拥有所需的一切。另一方面，如果您确实需要在存储中存储数据以从中选择值，那么您应该扩展ComboBox。

下面是ComboBox修改，它在请求结束之前保持价值。它并不完美，但也许它会帮助你：

var bik = new Ext.form.ComboBox({
    [...],
    // Check if query is queued or in progress
    isLoading: function() {
        return this.isStoreLoading || // check if store is making ajax request
            this.isQueryPending; // check if there is any query pending
    },
    // This is responsible for finding matching record in store
    assertValue: function() {
        if (this.isLoading()) {
            this.assertionRequired = true;
            return;
        }
        Ext.form.ComboBox.prototype.assertValue.apply(this, arguments);
    },
    // this is private method; you can equally write 'beforeload' event handler for store
    onBeforeLoad: function(){
        this.isQueryPending = false;
        this.isStoreLoading = true;
        Ext.form.ComboBox.prototype.onBeforeLoad.apply(this, arguments);
    },
    // catch moment when query is added to queue
    onKeyUp: function(e){
        var k = e.getKey();
        if(this.editable !== false && this.readOnly !== true && (k == e.BACKSPACE || !e.isSpecialKey())){
            this.isQueryPending = true;
        }
        Ext.form.ComboBox.prototype.onKeyUp.apply(this, arguments);
    },
    // this is private method; you can equally write 'load' event handler for store
    onLoad: function() {
        Ext.form.ComboBox.prototype.onLoad.apply(this, arguments);
        this.isQueryPending = false;
        this.isStoreLoading = false;
        if (this.assertionRequired === true) {
            delete this.assertionRequired;
            this.assertValue();
        }
    }
});
相关文章：