Melrow.Mtw.IssuesGridPanel = function(){

	var createIssueWindow;

	var store = new Ext.data.GroupingStore({
        url: '/mtw/issues/all',
        method: 'GET',

		reader: new Ext.data.JsonReader({
			totalProperty: "total",
		    root: "data",
		    id: "id"		
		}, Ext.data.Record.create([
			{name: 'id'},
	        {name: 'title'},
	        {name: 'type'},
	        {name: 'created', type: 'date', dateFormat: 'Y-m-d H:i:s'},
	        {name: 'updated', type: 'date', dateFormat: 'Y-m-d H:i:s'},
	        {name: 'status'}				        
	    ])),
        groupField: 'type',
        autoLoad: true,
		sortInfo: {field:'type', direction:'DESC'}
    });

	Melrow.Mtw.IssuesGridPanel.superclass.constructor.call(this, {
	 	frame:true,
		ds: store,

        columns: [
            {id:'id',header: "No.", width: 70, sortable: false, dataIndex: 'id'},
            {id:'title',header: "Title", width: 220, sortable: false, dataIndex: 'title'},            
            {id:'type', header: "Type", width: 50, sortable: false, dataIndex: 'type'},
            {id:'created',header: "Created", width: 70, sortable: false, renderer: function(val){
				return val != '1970-01-01 00:59:59' ? val.dateFormat('M d, Y') : '';
			}, dataIndex: 'created'},
            {ud:'updated', header: "Updated", width: 70, sortable: false, renderer: function(val){
				return (val.dateFormat('Y') == '1970' ? "" : val.dateFormat('M d, Y'));
			}, dataIndex: 'updated'},
            {id:'status',header: "Status", width: 70, sortable: false, dataIndex: 'status'}            
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),
		
		tbar: [{text:'Create issue', iconCls:'new-icon', handler: function(){
			if (!createIssueWindow) {
				createIssueWindow = new Melrow.Mtw.CreateIssueWindow();
				createIssueWindow.on('create', function(){
					this.getStore().reload();
				}, this);
			}
			createIssueWindow.show();
		}, scope:this}],

        height: 350,
        width:682,
        collapsible: false,
        enableColumnMove:false,
        enableColumnResize:false,        
        animCollapse: false,
        titlebar: false

	});

	this.on('rowclick', function(grid, rowIndex, e){
		this.fireEvent('view', this.getStore().getAt(rowIndex));
	}, this);

	this.addEvents({'view':true, 'error':true});

}

Ext.extend(Melrow.Mtw.IssuesGridPanel, Ext.grid.GridPanel);