/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'elections-sorter.xml',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'segment',
               id: '',
               totalRecords: ''
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Constituency', mapping: 'constituency'},
               {name: 'ElectedMLA', mapping: 'winningmla'},
               {name: 'ElectedParty', mapping: 'winningparty'},
               {name: 'NearestRival', mapping: 'nearestrival'},
               {name: 'LosingParty', mapping: 'losingparty'},
               {name: 'Margin', mapping: 'margin'}
               
           ])
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Constituency", width: 180, dataIndex: 'Constituency', sortable: true},
            {header: "Elected MLA", width: 180, dataIndex: 'ElectedMLA', sortable: true},
            {header: "Elected Party", width: 80, dataIndex: 'ElectedParty', sortable: true},
            {header: "Nearest Rival", width: 180, dataIndex: 'NearestRival', sortable: true},
	        {header: "Losing Party", width: 80, dataIndex: 'LosingParty', sortable: true},
            {header: "Margin", width: 100, dataIndex: 'Margin', sortable: true}
        ],
        renderTo:'example-grid',
        width:800,
        height:4000
    });

    store.load();
});