//*****************************************
//
//   Concert XML dispay script
//
//        made by Y.Ozawa 2008/12
//
//*****************************************

Ext.onReady(function(){

    Ext.QuickTips.init();

    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    var ds = new Ext.data.Store({
        // load using HTTP
        url: 'Concert.xml',
//		waitMsg:'Loading',

        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'No',
//        waitMsgTarget: true,
               totalRecords: '@total'
           }, [
               {name: 'date', mapping: 'ItemAttributes > date'},
               'place', 'conductor', 'orchestra', 'division', 'solist1', 'solist2', 'composer1', 'number1', 'composer2','number2','composer3','number3','composer4','number4','encore','note'
           ])
    });

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait...",
												store: ds});
myMask.show();

//    ds.load({url:'Concert.xml', waitMsg:'Loading'});
    ds.load();

    var colModel = new Ext.grid.ColumnModel([
        {id:'concert',header: "date", width: 60, sortable: true, locked:false, dataIndex: 'date'},
        {header: "place", width: 50, sortable: true,  dataIndex: 'place'},
        {header: "conductor", width: 70, sortable: true,  dataIndex: 'conductor'},
        {header: "orchestra", width: 75, sortable: true,  dataIndex: 'orchestra'},
        {header: "division", width: 50, sortable: true,  dataIndex: 'division'},
        {header: "solist1", width: 65, sortable: true,  dataIndex: 'solist1'},
        {header: "solist2", width: 65, sortable: true,  dataIndex: 'solist2'},
        {header: "composer1", width: 85, sortable: true,  dataIndex: 'composer1'},
        {header: "number1", width: 85, sortable: true,  dataIndex: 'number1'},
        {header: "composer2", width: 85, sortable: true,  dataIndex: 'composer2'},
        {header: "number2", width: 85, sortable: true,  dataIndex: 'number2'},
        {header: "composer3", width: 85, sortable: true,  dataIndex: 'composer3'},
        {header: "number3", width: 85, sortable: true,  dataIndex: 'number3'},
        {header: "composer4", width: 85, sortable: true,  dataIndex: 'composer4'},
        {header: "number4", width: 85, sortable: true,  dataIndex: 'number4'},
        {header: "encore", width: 85, sortable: true,  dataIndex: 'encore'},
        {header: "note", width: 85, sortable: true,  dataIndex: 'note'}
    ]);

    bd.createChild({tag: 'h2', html: '<br>'});

    var gridForm = new Ext.FormPanel({
        id: 'concert-form',
        frame: true,
        labelAlign: 'left',
        title: 'Concert data since 1971',
        bodyStyle:'padding:5px',
        width: 750,
        layout: 'column',	// Specifies that the items will now be arranged in columns
        items: [{
            columnWidth: 0.6,
            layout: 'fit',
            items: {
	            xtype: 'grid',
	            ds: ds,
	            cm: colModel,
	            sm: new Ext.grid.RowSelectionModel({
	                singleSelect: true,
	                listeners: {
	                    rowselect: function(sm, row, rec) {
	                        Ext.getCmp("concert-form").getForm().loadRecord(rec);
	                    }
	                }
	            }),
//	            autoExpandColumn: 'concert',
	            height: 480,
	            title:'Concert Data',
	            border: true,
		        listeners: {
		        	render: function(g) {
		        		g.getSelectionModel().selectRow(0);
		        	},
		        	delay: 10 // Allow rows to be rendered.
		        }
        	}
        },{
        	columnWidth: 0.4,
            xtype: 'fieldset',
            labelWidth: 90,
            title:'Concert details',
            defaults: {width: 140},	// Default config options for child items
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: false,
            style: {
                "margin-left": "10px", // when you add custom margin in IE 6...
                "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  
                // you have to adjust for it somewhere else
            },
            items: [{
                fieldLabel: 'date',
                name: 'date'
            },{
                fieldLabel: 'place',
                name: 'place'
            },{
                fieldLabel: 'conductor',
                name: 'conductor'
            },{
                fieldLabel: 'orchestra',
                name: 'orchestra'
            },{
                fieldLabel: 'division',
                name: 'division'
            },{
                fieldLabel: 'solist1',
                name: 'solist1'
            },{
                fieldLabel: 'solist2',
                name: 'solist2'
            },{
                fieldLabel: 'composer1',
                name: 'composer1'
            },{
                fieldLabel: 'number1',
                name: 'number1'
            },{
                fieldLabel: 'composer2',
                name: 'composer2'
            },{
                fieldLabel: 'number2',
                name: 'number2'
            },{
                fieldLabel: 'composer3',
                name: 'composer3'
            },{
                fieldLabel: 'number3',
                name: 'number3'
            },{
                fieldLabel: 'composer4',
                name: 'composer4'
            },{
                fieldLabel: 'number4',
                name: 'number4'
            },{
                fieldLabel: 'encore',
                name: 'encore'
            },{
                fieldLabel: 'note',
                name: 'note'
            }]
        }],
        renderTo: bd
    });
    
});