/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.GroupingStore({
        // load using HTTP
        url: 'http://www.noshrinkwrap.com/scripts/extjs/screencast.xml',
        sortInfo:{field:'Name', direction: "ASC"},
        groupField:'SupportedOS',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ID',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Name', mapping: 'Details > Name'},
               'URL', 'Publisher', 'SupportedOS', 'Price'
           ])
    });
    
    function renderName(value, p, record){
        return String.format(
                '<b><a href="'+record.data.URL+'" target="_blank">{0}</a></b>',
                value, record.data.forumtitle, record.id, record.data.forumid);
    }

    function renderReview(value, p, record){
        if (record.data.ReviewURL != undefined)
        	return String.format(
                	'<b><a href="'+record.data.ReviewURL+'" target="_blank">{0}</a></b>',
                	value, record.data.forumtitle, record.id, record.data.forumid);
        else return 'Not Yet';
    }
    
    function renderPublisher(value, p, record){
        return String.format(
                '<b><a href="'+record.data.PublisherURL+'" target="_blank">{0}</a></b>',
                value, record.data.forumtitle, record.id, record.data.forumid);
    }


    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Name", width: 140, dataIndex: 'Name', renderer: renderName, sortable: true},
            {header: "Reviewed?", width: 100, dataIndex: 'Review', renderer: renderReview, sortable: true},
            {header: "Publisher", width: 120, dataIndex: 'Publisher', sortable: true},
            {header: "Supported OS", width: 120, dataIndex: 'SupportedOS', sortable: true},
            {header: "Price", width: 80, dataIndex: 'Price', sortable: true}
        ],
        view: new Ext.grid.GroupingView({
        	forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),
        frame:true,
        title: 'Screencasting Comparison Chart',
        iconCls: 'icon-grid',
        renderTo:'example-grid',
        width:950,
        height:1250,
        stripeRows:true
    });

    store.load();
});