javascript - 当商店未加载结果时，Extjs 组合框不断重置文本值

Question

我正在为 Ext.js 开发一个 Search-As-You-Type 组件。它的特点是对多个单词进行 AND 过滤，每个单词都链接在一个 OR 过滤中，针对记录的任何属性进行过滤；随后。 当我输入“Ke Ba”时，它会过滤“Kevin Bacon”和“Becky Kennedy”。

我正在远程模式下加载初始数据集。

发生的情况是数据通过我的 REST-Proxy 和 JSON Reader 加载到存储中。目前，我不在服务器端“过滤”，而是返回所有内容并在客户端中模拟过滤器，就好像数据集是从服务器过滤出来的一样。组合框似乎也是如此。

现在，当我将搜索字符串更改为“Kre Ba”时，它将从 REST-API(所有数据)重新加载，但组合框的商店将为空，因为我没有任何与“匹配”的记录克雷巴”。

不知何故，Ext-js 决定重置组合框的值，并且整个搜索字符串消失。

有没有一种巧妙的方法来保留搜索字符串，即使商店在过滤后没有匹配的项目(值方面)？!

这是我发现的重置该值的 Ext.js 代码:

 onLoad: function(store, records, success) {
    var me = this;

    if (me.ignoreSelection > 0) {
        --me.ignoreSelection;
    }

    // If not querying using the raw field value, we can set the value now we have data
    if (success && !store.lastOptions.rawQuery) {
        // Set the value on load

        // There's no value.
        if (me.value == null) {
            // Highlight the first item in the list if autoSelect: true
            if (me.store.getCount()) {
                me.doAutoSelect();
            } else {
                // assign whatever empty value we have to prevent change from firing
                me.setValue(me.value);
            }
        } else {
            me.setValue(me.value);
        }
    }
},

在调试过程中，我发现 me.store.getCount() 返回 false 进行检查。

更新:

这是我的组合框配置:

Ext.define('MyApp.view.SearchAsYouTypeCombobox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.SearchAsYouTypeCombobox',

fieldLabel: 'Label',
hideLabel: true,
emptyText: 'Search',
hideTrigger: true,
minChars: 3,

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
            //some templates
    });

    me.callParent(arguments);
}

});

我正在尝试将组件构建为 Controller ，您只需将组合框配置为 View 和存储:

Ext.define('MyApp.controller.SearchAsYouTypeComboboxController', {
extend: 'Ext.app.Controller',

stores: [
    'SearchAsYouTypeStore'
],
views: [
    'SearchAsYouTypeCombobox'
],

onComboboxBeforeQuery1: function(queryPlan, eOpts) {
    var me = this;
    //determine tokens
    //add filter per token

    //One could optimize by not clearing the filter when the query String is only extended (leading or trailing) and not changed.
    //consider maybe the tokens 

    //console.log('beforeQuery');
    var comboBox = queryPlan.combo;
    var myStore = comboBox.getStore(); 

    var queryString = queryPlan.query;
    var prevQueryString = comboBox.lastQuery || '';

    var words = Ext.String.splitWords(queryString);

    //var filterAllPropertiesFilter = {};


    console.log('Query String :' + queryString);
    console.log("Words: " + words);

    //console.log(Ext.JSON.encode(myStore.storeId));

    //myStore.clearFilter(true);

    if(!Ext.isEmpty(queryString))
    {
        var filters = [];


        //When query has not been only expanded
        if(prevQueryString && 
        (queryString.length <= prevQueryString.length || 
        queryString.toLowerCase().lastIndexOf(prevQueryString.toLowerCase(), 0) !== 0))
        {
            //Reload everything new
            myStore.remoteFilter = true;
            myStore.clearFilter(true); //careful with this, it loads all the data unfiltered!


            myStore.remoteFilter = false;
            console.log('Creating Filters for each word.');
            Ext.Array.each(words,
            function(word, index, allWords){
                me.currentFilterWord = word;
                console.log('NEW FILTER: word:' + word);

                var filterAllPropertiesFilter = Ext.create('Ext.util.Filter',
                    {filterString: word,
                    filterFn: me.filterAllPropertiesFn});
                filters.push(filterAllPropertiesFilter);

            });

        }
        else{   
            if(!prevQueryString){
                myStore.remoteFilter = true;
                myStore.clearFilter();
            }
            myStore.remoteFilter = false;

            //only for the last word
            me.currentFilterWord = words[words.length-1];
            console.log('NEW FILTER: word: ' + me.currentFilterWord);

            var filterAllPropertiesFilter = Ext.create('Ext.util.Filter',
                {filterString: me.currentFilterWord,
                filterFn: me.filterAllPropertiesFn});

            filters.push(filterAllPropertiesFilter);
            Ext.Array.each(myStore.filters.items,
            function(filter, index, allFilters){
                myStore.removeFilter(filter, false);
            });
            //myStore.filter(filterAllPropertiesFilter);
        }

        myStore.filter(filters);
        comboBox.lastQuery = queryString;
        //filterBy(filters);
    }
    else
    {
        myStore.clearFilter(false);
    }

    comboBox.expand();
    queryPlan.cancel = true;
    return queryPlan;
},

filterAllPropertiesFn: function(item) {
    // filter magic
},

filterOverride: function(filters, value) {
    //changed the filter to subsequently filter 
},

init: function(application) {
    var me = this;
    console.log("init of Controller");

    //when more than 1 store then error
    console.log("Stores: " + this.stores[0]);

    var myStoreName = this.stores[0];
    var MyStore = me.getStore(myStoreName);

    console.log("MyStore: " + MyStore.storeId);

    Ext.override(MyStore,{override: myStoreName,
    filter: me.filterOverride});

    var myComboBoxName = this.views[0];
    var MyComboBox = me.getView(myComboBoxName);

    console.log("MyComboName: " + myComboBoxName);
    console.log("Data: " + MyStore.data.collect('id'));

    MyComboBox.store = MyStore;
    Ext.override(MyComboBox, {override: myComboBoxName,
    store: MyStore});

    console.log("myCombo.store: " + MyComboBox.store.storeId);


    this.control({
        "combobox": {
            beforequery: this.onComboboxBeforeQuery1,
        }
    });
},
});

Answer 1

我做了一些尝试和错误......

似乎可以通过对组合框 beforequery 方法的这些更改来了解。但不知何故，它不再“自动选择”第一次本地过滤后的第一个匹配项。

    onComboboxBeforeQuery1: function(queryPlan, eOpts) {
    var me = this;

    var comboBox = queryPlan.combo;
    var myStore = comboBox.getStore(); 

    var queryString = queryPlan.query;
    var prevQueryString = comboBox.lastQuery || '';

    var words = Ext.String.splitWords(queryString);

    console.log('Query String :' + queryString);
    console.log("Words: " + words);A


    if(!Ext.isEmpty(queryString))
    {
        var filters = [];


        //When query string has not just only expanded
        if(prevQueryString && 
        (queryString.length <= prevQueryString.length || 
        queryString.toLowerCase().lastIndexOf(prevQueryString.toLowerCase(), 0) !== 0))
        {
            //Reload everything new
            //myStore.remoteFilter = true;
            myStore.clearFilter(false);
            //myStore.load();


            //myStore.remoteFilter = false;
            console.log('Creating Filters for each word.');
            Ext.Array.each(words,
            function(word, index, allWords){
                me.currentFilterWord = word;
                console.log('NEW FILTER: word:' + word);

                var filterAllPropertiesFilter = Ext.create('Ext.util.Filter',
                    {filterString: word,
                    filterFn: me.filterAllPropertiesFn});
                filters.push(filterAllPropertiesFilter);

            });

        }
        else{   
            if(!prevQueryString){
                myStore.remoteFilter = true;
                myStore.clearFilter();
            }
            myStore.remoteFilter = false;

            //only for the last word
            me.currentFilterWord = words[words.length-1];
            console.log('NEW FILTER: word: ' + me.currentFilterWord);

            var filterAllPropertiesFilter = Ext.create('Ext.util.Filter',
                {filterString: me.currentFilterWord,
                filterFn: me.filterAllPropertiesFn});

            filters.push(filterAllPropertiesFilter);
            Ext.Array.each(myStore.filters.items,
            function(filter, index, allFilters){
                myStore.removeFilter(filter, false);
            });
        }

        myStore.filter(filters);
        comboBox.lastQuery = queryString;
    }
    else
    {
        myStore.clearFilter(false);
    }

    comboBox.expand();
    queryPlan.cancel = true;
    return queryPlan;
}