PDA

View Full Version : Problems with ComboBox Autocomplete



erickme
16 Feb 2010, 9:17 AM
I'm new to extjs and I'm trying to get a combobox work as an autocomplete. Currently when I enter something into the text field it loads the list, but it doesn't do the autocomplete it always pick the first in the list. This is probably a newbie error, but I can't find what's the problem. I will appreciate anyones help. Thanks



var oawrStore = new Ext.data.Store({
url: webroot + 'index.php?url=positions/getOawrs',
reader: new Ext.data.JsonReader({
root: 'OAWRS',
fields: [
{name: 'myId'},
{name: 'displayText'}
]
})
});

var submitsOawrCombo = new Ext.form.ComboBox({
hideTrigger:false,
triggerAction: 'all',
lazyRender:true,
typeAhead: true,
selectOnFocus: true,
store: oawrStore,
valueField: 'myId',
displayField: 'displayText',
mode: 'remote',
autoLoad: true,
minChars: 1,
});

realjax
16 Feb 2010, 3:12 PM
selectOnFocus false

erickme
17 Feb 2010, 7:13 AM
That doesn't fix my problem. Maybe I need to rephrase, my problem is that is not doing the autocomplete. For example I could have a list that is like this:

0012
1002
1201
3409

And if I enter 3 in the combobox it should only show the 3409, but instead it will show the same list and pick 0012 because is the first one.

goldledoigt
17 Feb 2010, 7:31 AM
Is it possible/usefull to use "autocomplete" with remote mode combobox ?

I mean, if you request new data each time you insert a char in the combobox input (minChars:1), the server should returns only data matching your query.

In this case autocomplete's not needed, don't you think ?

erickme
17 Feb 2010, 8:33 AM
Before I had mode: 'local', I just change it to remote trying to troubleshoot. Like I said I'm new to extjs. Should I set it back to 'local' or just comment that line out?

Like you said the server should return data matching my query, but that's my problem is not doing that. What do I have wrong in my code? Should the store take the value from the typed in the combobox to query it everytime?

goldledoigt
17 Feb 2010, 9:01 AM
as far as I know it works like this with local data :



var oawrStore = new Ext.data.Store({
data:[{myId:1, displayText:"abc"}, {myId:1, displayText:"bcd"}, {myId:1, displayText:"cde"}],
reader: new Ext.data.JsonReader({
fields: [
{name: 'myId'},
{name: 'displayText'}
]
})
});

var submitsOawrCombo = new Ext.form.ComboBox({
hideTrigger:false,
triggerAction: 'all',
lazyRender:true,
typeAhead: true,
selectOnFocus: true,
store: oawrStore,
valueField: 'myId',
displayField: 'displayText',
mode: 'local'
});



if you want a remote autocomplete ... this is another story.

What do you really need ?

erickme
17 Feb 2010, 9:27 AM
I'm getting my data from a sql query. So I guess this will be consider as remote then. But I'm lost on how to pass the typed text to my store to do the autocomplete

goldledoigt
17 Feb 2010, 9:54 AM
OK with something like this :


var oawrStore = new Ext.data.Store({
url:"yourUrl",
reader: new Ext.data.JsonReader({
root:"OAWRS",
fields: [{name: 'myId'}, {name: 'displayText'}]
})
});

var submitsOawrCombo = new Ext.form.ComboBox({
hideTrigger:false,
lazyRender:true,
typeAhead: true,
selectOnFocus: true,
store: oawrStore,
valueField: 'myId',
displayField: 'displayText',
autoLoad: true,
minChars:1,
});

Each time you add a char to the combobox input, an ajax request is fired with a POST param named "query" containing the current combobox value.

In PHP you can catch the param like this:

$_POST['query']

Server side you have to return data as a json string (in your case) formated like this :


{OAWRS:[{myId:1, displayText:"abc"}, {myId:2, displayText:"abcd"}, {myId:3, displayText:"abcde"}]}

erickme
19 Feb 2010, 12:55 PM
That works. Thanks a lot.

goldledoigt
21 Feb 2010, 11:23 PM
my pleasure