var DataStore;
var ColumnModel;
var ListingEditorGrid;
var ListingWindow;

Ext.onReady(function() {
    Ext.QuickTips.init();
    DataStore = new Ext.data.Store({
        id: 'DataStore', 
        baseParams:{task: "LIST"},
        reader: new Ext.data.JsonReader({
            root:'results',
            totalProperty:'total',
            id:'id'
        },[
           {name: 'name', type: 'string', mapping: 'name'},
           {name: 'id', type: 'int', mapping: 'id'},
           {name: 'keys', type: 'int', mapping: 'keys'},
           {name: 'clicks', type: 'int', mapping: 'clicks'},
           {name: 'miles', type: 'float', mapping: 'miles'}
        ])
    });
    ColumnModel = new Ext.grid.ColumnModel({
		columns: [new Ext.grid.RowNumberer(), 
		 {
			header: 'Name',
			dataIndex: 'name',
			width: 80,
			readOnly: true,
			hidden: false
		}, {
			header: 'Keys',
			dataIndex: 'keys',
			width: 55,
			readOnly: true,
			hidden: false
		}, {
			header: 'Clicks',
			dataIndex: 'clicks',
			width: 55,
			readOnly: true,
			hidden: false
		}, {
			header: 'Miles',
			dataIndex: 'miles',
			width: 55,
			readOnly: true,
			hidden: false
		}],
		defaults: {
			sortable: true,
			menuDisabled: false
		}
    });
    ColumnModel.defaultSortable = true;    

    ListingEditorGrid = new Ext.grid.GridPanel({
		id: 'ListingEditorGrid',
		store: DataStore,
		cm: ColumnModel,
		enableColLock:false,
		clicksToEdit: 1,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
		viewConfig: { forceFit: true, emptyText: 'Unable to load the stats, please try again.' },
		region: 'center'
    });
    
    var ct = new Ext.Panel({
    	renderTo: 'tableholder',
    	frame: false,
    	title: 'Team: PSEiKO.nl',
    	layout: 'border',
    	height: 200,
    	items: [
    	        ListingEditorGrid
    	       ]
    	
    });
	DataStore.setDefaultSort('keys','DESC');
    DataStore.loadData(JSONData);
    gadgets.window.adjustHeight();
});