Ext.onReady(function() {
 
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: '/externals/ajax/solarSystems.php'
        }),
        reader: new Ext.data.JsonReader({
            root: 'systems',
            totalProperty: 'totalCount',
            id: 'solarSystemID'
        }, [
            {name: 'name', mapping: 'solarSystemName'},
            {name: 'id', mapping: 'solarSystemID'},
            {name: 'region', mapping: 'regionName'},
            {name: 'constellation', mapping: 'constellationName'},
            {name: 'security', mapping: 'Security'}
        ])
    });

    // Custom rendering Template
    var resultTpl = new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
        '<h3><span>Sec: {security}</span> {name}</h3>',
        '{region} / {constellation}',
        '</div></tpl>'
    );
    
    var search = new Ext.form.ComboBox({
        store: ds,
        minChars: 2,
        maxHeight: 340,
        displayField:'title',
        typeAhead: false,
        loadingText: 'Searching...',
        width: 250,
        pageSize:10,
        hideTrigger:true,
        tpl: resultTpl,
        applyTo: 'search',
        itemSelector: 'div.search-item',
        onSelect: function(record){ // override default onSelect to do redirect
            search.setValue(record.data.name);
            search.collapse();
            window.location.href='?System='+record.data.name;
        }
    });
});