我正在为 Ext.js 开发一个 Search-As-You-Type 组件。它的特点是对几个单词进行 AND 过滤，每个单词都链接在 OR 过滤中，以针对记录的任何属性进行过滤；随后。当我输入“Ke Ba”时，它将过滤“Kevin Bacon”和“Becky Kennedy”。
我正在以远程模式加载初始数据集。
发生的情况是数据通过我的 REST 代理和 JSON 阅读器加载到存储中。目前我不在服务器端“过滤”，而是返回所有内容并在客户端模拟过滤器，就好像数据集是从服务器过滤的一样。所以它似乎是组合框。
现在，当我将搜索字符串更改为“Kre Ba”时，它将从 REST-API（所有数据）重新加载，但由于我没有任何匹配“Kre Ba”的记录，因此组合框的 Store 将为空.
不知何故，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);
}
});
我正在尝试将组件构建为控制器，您只需将组合框配置为视图和商店：
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,
}
});
},
});