PDA

View Full Version : Can combobox do this?



brenda
10 Sep 2008, 9:52 PM
I am having a scenario similar to this:
In an XML file, it store a list of people's names and their pet-names. Using a combo box, it will display their name and if I were to type out his/ her name, it will filter out one by one.
What I hope to achieve is that the combo box is able to "know" that I am typing in his/ her pet-name as well and filter the name one by one.

I am curious to know if that is possible? If it's possible, is there any config options that I've missed out in my codes?

Or, is there any missing field(s) in my nameData that can help me to achieve what I want?

I've done up a simple code as follow to produce a "normal" combo box:

var nameData = [
['astro-boy', 'Michael'],
['mary-jane', 'Macy],
['sailAway', 'Kelly'],
['Reaper', 'John']
];

var nameStore = new Ext.data.SimpleStore({
fields: ['petName', 'name'],
data: nameData
});

... // some other codes

,{
xtype: 'combo',
fieldLabel: 'Name',
width: 80,
typeAhead: true,
triggerAction: 'all',
store: nameStore,
displayField: 'name',
valueField: 'petName',
mode: 'local'
}

PS: I thought I saw a sample that does what I've mentioned or was it my eyes playing tricks on me? :">

devnull
11 Sep 2008, 7:02 AM
Yes, it is possible. You have correctly specified the 'typeAhead' config option, but you may want to look in the docs to see what value for 'triggerAction' is suitable for your needs.

brenda
11 Sep 2008, 5:10 PM
Yes, it is possible. You have correctly specified the 'typeAhead' config option, but you may want to look in the docs to see what value for 'triggerAction' is suitable for your needs.

oh.. Ok :)

Thank for the advice, devnull

brenda
11 Sep 2008, 9:26 PM
:( I cannot get inspiration out from the docs until now...

I hope that someone can guide me through this.. I've search the forum too and it seems like there's very little explanation or examples on the 'allQuery' config.

devnull
12 Sep 2008, 7:15 AM
There should be no need to modify the allQuery param in most cases if using a sql backend. This is the param that is meant to be fed to a 'where' clause in a sql statement.

Animal
12 Sep 2008, 8:08 AM
You want it to filter a local store by examining two fields? You'll have to extend Combobox to implement a doQuery which filters on both fields.

This code is untested, so YMMV, but the principle is there for you to use if you care to. Changes from the base class are in red:



doQuery : function(q, forceAll){
if(q === undefined || q === null){
q = '';
}
var qe = {
query: q,
forceAll: forceAll,
combo: this,
cancel:false
};
if(this.fireEvent('beforequery', qe)===false || qe.cancel){
return false;
}
q = qe.query;
forceAll = qe.forceAll;
if(forceAll === true || (q.length >= this.minChars)){
if(this.lastQuery !== q){
this.lastQuery = q;
if(this.mode == 'local'){
this.selectedIndex = -1;
if(forceAll){
this.store.clearFilter();
}else{
var fn1 = this.store.createFilterFn(this.displayField, q);
var fn2 = this.store.createFilterFn(this.valueField, q);
this.store.filterBy(function(rec) {
return fn1(rec) || fn2(rec);
}, this);
}
this.onLoad();
}else{
this.store.baseParams[this.queryParam] = q;
this.store.load({
params: this.getParams(q)
});
this.expand();
}
}else{
this.selectedIndex = -1;
this.onLoad();
}
}
},

brenda
14 Sep 2008, 7:16 PM
You want it to filter a local store by examining two fields? You'll have to extend Combobox to implement a doQuery which filters on both fields.

This code is untested, so YMMV, but the principle is there for you to use if you care to. Changes from the base class are in red:



doQuery : function(q, forceAll){
if(q === undefined || q === null){
q = '';
}
var qe = {
query: q,
forceAll: forceAll,
combo: this,
cancel:false
};
if(this.fireEvent('beforequery', qe)===false || qe.cancel){
return false;
}
q = qe.query;
forceAll = qe.forceAll;
if(forceAll === true || (q.length >= this.minChars)){
if(this.lastQuery !== q){
this.lastQuery = q;
if(this.mode == 'local'){
this.selectedIndex = -1;
if(forceAll){
this.store.clearFilter();
}else{
var fn1 = this.store.createFilterFn(this.displayField, q);
var fn2 = this.store.createFilterFn(this.valueField, q);
this.store.filterBy(function(rec) {
return fn1(rec) || fn2(rec);
}, this);
}
this.onLoad();
}else{
this.store.baseParams[this.queryParam] = q;
this.store.load({
params: this.getParams(q)
});
this.expand();
}
}else{
this.selectedIndex = -1;
this.onLoad();
}
}
},

Hi Animal, ya I want to filter a local store by examing 2 fields..

Thanks for your post, Reading through them now :)

brenda
14 Sep 2008, 7:56 PM
It works!! Thank Animal :D


With a bit of error in firebug


fn1 is not a function
[Break on this error] return fn1(rec) || fn2(rec);