Ext.onReady(function(){

    var back = new Ext.Button({
        text:'Zurück',
        handler:function(){location.href='index.html';}
    }
    );
    
    back.render('button');
    
    function changeURL (Adresse,Zielframe)
     {
       Fenster1 = window.open(Adresse, Zielframe);
       Fenster1.focus();
     }
    
    var help = new Ext.Button({
    text:'Hilfe',
    handler:function(){changeURL('Datenbank_hochschule dual_Funktionsweise_Schueler.pdf','_blank');}
    }
    );
    
    help.render('help');
    
    


    
    var dsCat_ort = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: 'quicksearch.mysql.php?id=ort'}),
        method: 'POST',
        reader: new Ext.data.JsonReader({
            },[
                {name: 'city', mapping: 'city'}
            ])
        
    });
    

    var combo_ort = new Ext.form.ComboBox({  
        store: dsCat_ort,
        fieldLabel: 'Hochschule/Ort',
        name: 'city',
        displayField:'city',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'alle...',
        selectOnFocus:true
    });  

    dsCat_ort.load();

    
    
    var simple = new Ext.FormPanel({
        labelWidth: 140, // label settings here cascade unless overridden
        frame:true,
        title: 'Suche nach Hochschule/Ort:',
        bodyStyle:'padding:5px 5px 0',
        width: 600,
        defaults: {width: 400},
        defaultType: 'textfield',

        items: [ combo_ort
        ] 

    });
    

    var submit = simple.addButton({
        text: 'Suchen', 
        disabled:false,
        handler: function() {
             loadGrid();      
        }
    });

    var reset = simple.addButton({
        text: 'Neu', 
        disabled:false,
        handler: function() {
             clearCombo();    
        }
    });


    simple.render('test'); 
    

    
    function clearCombo() {
        combo_ort.reset();
        document.getElementById('grid-example').innerHTML = '';  
    }
        
    function loadGrid(){    
        // create the Grid
        document.getElementById('grid-example').innerHTML = '';
                               var store = new Ext.data.JsonStore({
        url: 'ajax_area.php?ort=' + escape(combo_ort.getValue()),
        root: 'data', 
        fields: ['uni_name1','model', 'course_name', 'ausbildung', 'abschluss', 'course_id'] 
        });
    
        store.load();

    
        
    function change(val){
      if(1 > 0){
          return '<a href="http://www.google.de&id='+ val +'" style="color: #444444;">' + val + '</a>';
      }else if(val < 0){
          return '<span style="color:red;">' + val + '</span>';
      }
      return val;
    }
    
    function details(){
        return '<a href="#" style="text-decoration: none">Details</a>';
    }
    
        var grid = new Ext.grid.GridPanel({
            
            store: store,
            columns: [
                {id: "company", header: "Hochschule", width: 230, sortable: true, dataIndex: 'uni_name1'},
                {header: "Studienmodell", width: 150, sortable: true, dataIndex: 'model'},
                {header: "Studiengang", width: 270, sortable: true, dataIndex: 'course_name'},
                {header: "Ausbildungsberuf", width: 190, sortable: true, dataIndex: 'ausbildung'},
                {header: "Abschluss/Titel", width: 110, sortable: true, dataIndex: 'abschluss'},
                {header: "Details", width: 50, sortable: true, renderer: details, dataIndex: ''}
            ],
            stripeRows: true,
            sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
            height:460,
            width:1000,
            title:'Ergebnisse: Hochschule/Ort',   
            autoExpandColumn: 'company'
        });
        
        grid.render('grid-example');
        grid.addListener('rowclick', DetailInfo);
        grid.getSelectionModel().selectFirstRow(); 
           
    }
});