cs.pro.ProjectGrid = Ext.extend(Ext.grid.GridPanel, {

	login: function()
	{
		this.store.load();
		this.show();
	},

	logout: function()
	{
		this.store.load();
		this.hide();
	},

	initComponent: function()
	{
		this.reader = new Ext.data.JsonReader({
			root: 'rows',
			totalProperty: 'count',
			id: 'id'
		},[
			{name: 'id', type: 'string', mapping: 'id'},
			{name: 'project', type: 'string', mapping: 'project'},
			{name: 'filename', type: 'string', mapping: 'filename'},
			{name: 'filesize', type: 'string', mapping: 'filesize'},
			{name: 'created', type: 'date', mapping: 'created', dateFormat: 'Y-m-d H:i:s.u'},
			{name: 'area', type: 'string', mapping: 'area'},
			{name: 'volume', type: 'string', mapping: 'volume'}
	 	]);

		this.store = new Ext.data.GroupingStore({
			autoLoad: true,
			proxy: new Ext.data.HttpProxy({
				url: 'json/filelist',
				method: 'POST'
			}),
			reader: this.reader,
			sortInfo: {field: 'project', direction: 'ASC'},
			groupOnSort: true,
			groupField: 'project',
			listeners: {
				'datachanged': function()
				{
					if (this.getSortState().field == 'project')
					{
						if (!this.getGroupState())
						{
							this.groupBy('project');
						}
					} else {
						if (this.getGroupState())
						{
							this.clearGrouping();
						}
					}
				}
			}
		});
		
		Ext.apply(this, {

			//frame: true,
			//title: cs.pro.i18n.cadspanPro,
			//title: '<big><big>&nbsp;</big></big>',
			//iconCls: 'title',
			region: 'center',

			columns: [
				{
					header: 'Project',
					width: 20,
					sortable: true, 
					menuDisabled: true,
					dataIndex: 'project'
				},{
					header: 'Filename',
					width: 30,
					sortable: true,
					menuDisabled: true,
					dataIndex: 'filename'
				},{
					header: 'Filesize',
					width: 20,
					sortable: true, 
					menuDisabled: true,
					dataIndex: 'filesize'
				},{
					header: 'Area',
					width: 10,
					sortable: true, 
					menuDisabled: true,
					dataIndex: 'area'
				},{
					header: 'Volume',
					width: 10,
					sortable: true, 
					menuDisabled: true,
					dataIndex: 'volume'
				},{
					header: 'Created',
					width: 20,
					sortable: true, 
					menuDisabled: true,
					renderer: Ext.util.Format.dateRenderer('m/d/Y H:i'),
					dataIndex: 'created'
				}
			],

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

			store: this.store,
			
			loadMask: {msg: 'Refreshing Files...'},
			
			tbar: [
				{
					text:'Upload',
					handler: cs.pro.upload.show,
					iconCls: 'upload'
				},{
					text: 'Download',
					handler: cs.pro.app.getDownload,
					iconCls: 'download'
				},{
					text: 'Delete',
					handler: cs.pro.app.getProDelete,
					iconCls: 'delete'
				},
				'-',
				{
					text: 'Refresh',
					handler: function() { cs.pro.viewport.viewport.projectGrid.store.reload() },
					iconCls: 'refresh'
				}
			]
			
		});

		cs.pro.ProjectGrid.superclass.initComponent.apply(this, arguments);
		this.getSelectionModel().singleSelect = true;
	}
});