/*
 * Ext JS Library 1.0.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */

Ext.onReady(function(){

    //Ext.MessageBox.alert("Sorry", "This example is not compatible with the new site, no longer functions and is for reference only");

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'GetNames?st=tsj&t=t'
        }),
        reader: new Ext.data.JsonReader({
            root: 'taxanames',
            totalProperty: 'totalCount',
            id: 'TName'
        }, [
            {name: 'TName'},
            {name: 'TLevel'}
        ])
    });

    // Custom rendering Template
    var resultTpl = new Ext.Template(
        '<div class="search-item">',
            '<span>{TLevel}</span>{TName}',
        '</div>'
    );
    
    var search = new Ext.form.ComboBox({
        store: ds,
        minChars: 3,
        //displayField:'title',
        typeAhead: false,
        loadingText: 'Searching...',
        displayField: 'TName',
        width: 250,
        pageSize:10,
        hideTrigger:true,
        tpl: resultTpl 
    });
    search.on({
        select: function(combo, record, index) {
            document.getElementById('txtMapSpecies').value = record.data.TName;
            document.getElementById('txtMapSpeciesLevel').value = record.data.TLevel;
        }
    }); 
    // apply it to the exsting input element
    search.applyTo('search');
});