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

Ext.onReady(function(){

    Ext.QuickTips.init();
    
    var xg2 = Ext.grid;

    // shared reader
    var reader2 = new Ext.data.ArrayReader({}, [
       {name: 'fotoCampo'},
       {name: 'nomeCampo'},
       {name: 'luogoCampo'},
       {name: 'descrizioneCampo'}
    ]);

    var grid2 = new xg2.GridPanel({
        store: new Ext.data.GroupingStore({
            reader: reader2,
            
            data:   [
                    
                    ['<img src="warpigs/campi/salamandra_small.jpg" alt=""/>','SALAMANDRA CAMP','Cevio','Boschivo, molto duro fisicamente. <br/>Molto pendente, attraversato da sterrate forestali e riali. <br/>Facile da raggiungere con ampio parcheggio.<br/> Completamente esente da persone esterne o animali. <br/>Giocatori consigliati una decina per squadra']
                    ],
            sortInfo:{field: 'nomeCampo', direction: "ASC"},
            groupField:'luogoCampo'
        }),
        disableSelection:true,
        columns: [
            {id:'fotoCampo',header: "Foto", width: 25, sortable: false, dataIndex: 'fotoCampo'},
            {id:'nomeCampo',header: "Nome", width: 35, sortable: true, dataIndex: 'nomeCampo', align:'center'},
            {id:'luogoCampo',header: "Luogo", width: 25, sortable: true, dataIndex: 'luogoCampo', align:'center'},
            {id:'descrizioneCampo',header: "Descrizione", width: 65, sortable: true, dataIndex: 'descrizioneCampo',css: 'white-space: normal;'}
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),

        frame:true,
        width: 826,
        height: 200,
        collapsible: true,
        animCollapse: false,
        title: 'Campi',
        iconCls: 'icon-grid',
        renderTo: document.getElementById("campi")
    });
    
    

});