/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
var grid;


Ext.onReady(function() {


    // create the grid
      grid = new Ext.grid.TableGrid("the-table", {
      stripeRows: true,
      width:1000,
      height:500,
      clicksToEdit:1,
      selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
 /*     tbar: [
      {
          text: 'Markierten Eintrag exportieren',
          tooltip: 'Klicke um einen neuen Eintrag hinzuzufügen',
          
  
          iconCls:'add', 
          handler: properties, //what happens when user clicks on it
          scope: this
      }
      ]
*/
    });
    grid.render();
    grid.addListener('click', properties);
  //}, false, {single:true}); // run once
});


// Init the singleton.  Any tag-based quick tips will start working.
Ext.QuickTips.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.QuickTips.getQuickTip(), {
    maxWidth: 200,
    minWidth: 100,
    showDelay: 50,
    trackMouse: true
});



    
function properties(item) {

   var sel = grid.selModel.getSelected();
   if(sel != null){
      var titel = sel.get('tcol-0');
    	var name = sel.get('tcol-1');
    	var ort = sel.get('tcol-4');
    	var strasse = sel.get('tcol-2');
    	var plz = sel.get('tcol-3');    	
    	var tel = sel.get('tcol-5');
    	var fax = sel.get('tcol-6');
    	var email = sel.get('tcol-7');
    	
    	Ext.MessageBox.show({
      msg: 'ANREDE : '+titel+'<br>'+'NAME : '+name+'<br>'+'STRASSE : '+strasse+'<br>'+'PLZ : '+plz+'<br>'+'ORT : '+ort+'<br>'+'TEL : '+tel+'<br>'+'FAX : '+fax+'<br>'+'EMAIL : '+email,
      width: 400
      });
      grid.selModel.clearSelections();
   }else{

   }

}; // end properties     

/**
 * @class Ext.grid.TableGrid
 * @extends Ext.grid.Grid
 * A Grid which creates itself from an existing HTML table element.
 * @constructor
 * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created - 
 * The table MUST have some type of size defined for the grid to fill. The container will be 
 * automatically set to position relative if it isn't already.
 * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
 * properties: fields and columns which allow for customizing data fields and columns for this grid.
 * @history
 * 2007-03-01 Original version by Nige "Animal" White
 * 2007-03-10 jvs Slightly refactored to reuse existing classes
 */
Ext.grid.TableGrid = function(table, config) {
  config = config || {};
  Ext.apply(this, config);
  var cf = config.fields || [], ch = config.columns || [];
  table = Ext.get(table);

  var ct = table.insertSibling();

  var fields = [], cols = [];
  var headers = table.query("thead th");
  for (var i = 0, h; h = headers[i]; i++) {
    var text = h.innerHTML;
    var name = 'tcol-'+i;

    fields.push(Ext.applyIf(cf[i] || {}, {
      name: name,
      mapping: 'td:nth('+(i+1)+')/@innerHTML'
    }));

    cols.push(Ext.applyIf(ch[i] || {}, {
      'header': text,
      'dataIndex': name,
      'width': 130,
      'tooltip': h.title,
      'sortable': true,
      'locked': true,
      'editor': new Ext.form.TextField({ 
                        allowBlank: false
                    })
    }));
  }

  var ds  = new Ext.data.Store({
    reader: new Ext.data.XmlReader({
      record:'tbody tr'
    }, fields),
    sortInfo:{field: 'tcol-1', direction: "ASC"}
  });

  ds.loadData(table.dom);

  var cm = new Ext.grid.ColumnModel(cols);

  if (config.width || config.height) {
    ct.setSize(config.width || 'auto', config.height || 'auto');
  } else {
    ct.setWidth(table.getWidth());
  }

  if (config.remove !== false) {
    table.remove();
  }

  Ext.applyIf(this, {
    'ds': ds,
    'cm': cm,
    'sm': new Ext.grid.RowSelectionModel(),
    autoHeight: true,
    autoWidth: true
  });
  Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
};
Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);