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');

   // simple array store
    var dsCat_studiengang = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: 'quicksearch.mysql.php?id=studiengang'}),
        method: 'POST',
        reader: new Ext.data.JsonReader({
            },[
                {name: 'course_name', mapping: 'course_name'}
            ])

    });



    var combo_sg = new Ext.form.ComboBox({
        store: dsCat_studiengang ,
        fieldLabel: 'Studiengänge',
        name: 'studiengang',
        displayField:'course_name',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'alle...',
        selectOnFocus:true
    });




    dsCat_studiengang.load();



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

        items: [ combo_sg
        ]

    });


    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_sg.reset();
        document.getElementById('grid-example').innerHTML = '';
    }

    function loadGrid(){


        // create the Grid
        document.getElementById('grid-example').innerHTML = '';

        var store = new Ext.data.JsonStore({
        url: 'ajax_sg.php?sg=' + escape(combo_sg.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.hochschule-dual.de" target="_blank" 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: [
                {header: "Hochschule", width: 230, sortable: true, renderer: 'uni_name1', dataIndex: 'uni_name1'},
                {header: "Studienmodell", width: 150, sortable: true, renderer: 'model', dataIndex: 'model'},
                {header: "Studiengang", width: 270, sortable: true, renderer: 'course_name', dataIndex: 'course_name'},
                {header: "Ausbildungsberuf", width: 170, sortable: true, renderer: 'ausbildung', dataIndex: 'ausbildung'},
                {header: "Abschluss/Titel", width: 110, sortable: true, renderer: 'abschluss', dataIndex: 'abschluss'},
                {header: "Details", align: 'left', width: 50, sortable: true, renderer: details, dataIndex: ''}
            ],
            stripeRows: true,
            //autoExpandColumn: 'email',
            sm: new Ext.grid.RowSelectionModel({singleSelect:true}),

            height:460,
            width:1001,
            title:'Ergebnisse: Studieng&auml;nge'
        });

        grid.render('grid-example');
        grid.addListener('rowclick', DetailInfo);
        grid.getSelectionModel().selectFirstRow();

    }




});