PDA

View Full Version : combobox typeahead proof of concept



chewiecat
7 Dec 2007, 8:02 AM
Trying to move an ugly asp.net site over to using extjs (mainly because of the nice working accordian and layout and don't get me started on lack of working controls with vs2005 or vs2008 for that matter!)

On the old site I have a working typeahead textbox that uses a webservice in c# asp.net which connects via oledb to filter database and returns an array of strings.

From looking thru the forum it appears a key value pair is needed on the return from XmlReader...so...I have the vague notion I need a data store with a proxy to the service and a reader.
The combobox seems it would need the number of returns and length of typing to kick off the service.

Is typeahead the correct term for what I'm looking for?

Could someone point me to a good example? should there be any issues with housing it on an accordian panel?
What should the xml returned look like?
Thanks.

tryanDLS
7 Dec 2007, 8:08 AM
Have you looked at the forum-search example? There may also be some things in Examples or Extensions that might help you.

chewiecat
7 Dec 2007, 1:44 PM
Perhaps chewiecat was over enthusiatic.
I was able to get a tree in the accordian panel (saki's accordian example) and a grid with xml to show up.
How can a combobox be so difficult...

I'm using a border layout and have the following so far..I can change the WebService to spit back what I need within reason. JSON or XML I don't care. I guess I have more basic problems. I did look at the example..perhaps I should try on a simpler form.

Is the Ext.ux.InfoPanel incompatible with Ext.form.combobox ?
The accodian shows up OK but with nothing in the panel-2.

Here is the div on the default.aspx page:


<div id="panel-2">
<div>2. Search Address</div>
</div>

I have this in my accordian.js file in this order:


var store1 = new Ext.data.Store({
fields: ['key', 'value'],
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: 'http://localhost/WebService.asmx?GetAddress'
}),
reader: new Ext.data.JsonReader({
fields: [
{ name: 'key', mapping: 'Key' },
{ name: 'value', mapping: 'Value' }
],
id: 'key'
}),
remoteSort: false
});

var sbox1 = new Ext.form.ComboBox({
displayField: 'value',
fieldLabel: 'Key',
mode: 'remote',
selectOnFocus: true,
store: store1,
triggerAction: 'all',
typeAhead: true,
valueField: 'key',
width: 30
});

To add the combobox to the accordian panel I have:


var panel2 = acc.add(new Ext.ux.InfoPanel('panel-2', {
icon: iconPath + 'magnifier.png'
, showPin: true
, minWidth: 200
, minHeight: 300
, items: [ sbox1 ]
}));