<?php require "_header.php";?>
<script type="text/javascript">
var secFields = [{
	name: 'project_id',
    type: 'int'
    },{
 	name: 'project_name',
    type: 'string'
}]

var Store = new Ext.data.JsonStore({
    url:'data/project-grid-filter.php',
    root: 'rowe',
	remoteSort: true,
    sortInfo: {
    	field: 'project_id',
        direction: 'ASC'
   	},
    fields: secFields,
    idProperty: 'project_id',
	autoLoad: true,
    writer:new Ext.data.JsonWriter()
});

Ext.onReady(function(){
	
	Ext.QuickTips.init();
    
	var colModel = new Ext.grid.ColumnModel([
		{ 
			header: "Project Id", 
			dataIndex: 'project_id',
			sortable: true, 
			hidden: true 
		},{ 
			id: 'project_name',
			header: "Project Name",
			width: 50,
			dataIndex: 'project_name',
			align: 'left',
			sortable: true
        }
		
    ]);
	
	var flgalert = 0;
	
	var grid = new Ext.grid.GridPanel({
		ds: Store,
		cm: colModel,
		sm: new Ext.grid.RowSelectionModel({
			singleSelect: false,
			listeners:{
				rowselect: function(sm, row, rec){
					Ext.getCmp("company-form").getForm().loadRecord(rec);
					gridForm.getForm().findField('project_name').enable();
					Ext.getCmp('btnSave').enable();
					Ext.getCmp('btnDel').enable();
					Ext.getCmp('btnAdd').disable();
				}
			}
		}),
		autoExpandColumn: 'project_name',
		height: 250,
		border: true
	});
	
	var gridForm = new Ext.FormPanel({	
		id: 'company-form',
		frame: true,
		url:'save-project.php',
		labelAlign: 'left',
		bodyStyle:'padding:5px',
    	layout: 'column',
    	items:[
			{
				columnWidth: 1,
				layout: 'fit',
				items:[grid]
			},{
				columnWidth: 1,
				xtype: 'fieldset',
				labelWidth: 110 ,
				defaults: {border:false},
				defaultType: 'textfield',
				height:160,
				bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
				border:false,
				style:{
					"margin-left": "10px", 
					"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" 
				},
            	items:[				
					{
						xtype: 'textfield',
						name: 'project_name',
						id:'project_name',
						fieldLabel: 'Project Name',
						width:150,
						disabled:true,
						allowBlank:false,
						autoCreate: {tag: 'input', type: 'text',  maxlength: '50'}
					},
					{
						xtype: 'numberfield',
						name: 'project_id',
						id:'project_id',
						hidden:true
					},
					{
						xtype: 'textfield',
						name: 'mode',
						id:'mode',
						value:'edit',
						hidden:true
					}
				]
			}
        ]
    });

	var DesignationWindow = new Ext.Window({
		title: 'Project Information',
		width:420,		
		height:380,		
		border: false,
		modal:true,
		layout: 'fit',
		closeAction:'close',
		collapsible:true,
		items: gridForm,
		buttonAlign: 'center',
	    buttons:[
			{
				text: 'Add New',
				name:'btnAdd',
				iconCls: 'icon-add',
				id:'btnAdd',
				handler: function (){
					gridForm.getForm().findField('project_id').setValue(0);
					gridForm.getForm().findField('project_name').reset();
					gridForm.getForm().findField('project_name').enable();
					gridForm.getForm().findField('project_name').focus(true,500);
					Ext.getCmp('btnAdd').disable();
					Ext.getCmp('btnDel').disable();
					Ext.getCmp('btnSave').enable();
				}
			},{
				text: 'Save', 
				name:'btnSave',
				iconCls: 'icon-save',		
				id:'btnSave',
				disabled:true,
				handler: function (){
					gridForm.getForm().submit({
						waitMsg: 'Saving...',
						success: function(){
							Ext.getCmp('btnDel').disable();
							Ext.getCmp('btnSave').disable();
							gridForm.getForm().findField('project_name').disable();
							Store.load();	
							gridForm.getForm().reset();
							grid.getSelectionModel().clearSelections();
							Ext.getCmp('btnAdd').enable();
						},
						failure: function(){
							Ext.MessageBox.show({
								title: 'Error',
							   	msg: 'Please fill up complete form.',
							   	buttons: Ext.MessageBox.OK,
							   	icon:Ext.MessageBox.ERROR
							});									
						}
					});							
				}						 
			},{
				text: 'Delete',
				name:'btnDel',
				iconCls:'remove',
				id:'btnDel',
				disabled: true,
				handler: function(){
					gridForm.getForm().findField('mode').setValue('delete');
					if(gridForm.getForm().findField('project_name').getValue() !=''){
					Ext.MessageBox.confirm('Confirmation', ' Are you sure want to delete.?', deletesubject);
					Ext.getCmp('btnAdd').enable();
						
					} 
				}	
			},{
				text: 'Reset', 
			    iconCls: 'icon-reset',		
				name:'btnreset',
				id:'btnreset',
				handler: function(){
					gridForm.getForm().reset();
					gridForm.getForm().findField('project_name').disable();
					Ext.getCmp('btnSave').disable();
					Ext.getCmp('btnDel').disable();
					Ext.getCmp('btnAdd').enable();
					grid.getSelectionModel().clearSelections();
				}
			},{
				text: 'Close', 
				name:'btnclose',
				iconCls: 'icon-close',		
				id:'btnclose',
				handler: function(){
					DesignationWindow.close();
				}
			}
		]
	});
	
	var varWidth =  (screen.width - DesignationWindow.width)/2;
    DesignationWindow.setPosition(varWidth,((screen.height/4)-100));
	DesignationWindow.show();
	

	
	function deletesubject(btn){
		if(btn=='yes'){			  			
			gridForm.getForm().submit({
				waitMsg: 'Loading...',
				success: function(){
					
					gridForm.getForm().reset();
					gridForm.getForm().findField('project_name').disable();
					Ext.getCmp('btnSave').disable();
					Ext.getCmp('btnDel').disable();
					Store.load();
					
				},
				failure: function(){
					Ext.MessageBox.show({
						title: 'Error',
						msg: 'Please fill up complete form.',
						buttons: Ext.MessageBox.OK,
						icon:Ext.MessageBox.ERROR
					});									
				}
			});
		} 
	}
});
</script>
<!-- end custom CSS/JS -->
<div id="main-content" align="center"></div>
<?php require "_footer.php";?>