var labelArray;
labelArray = [
				
				['Employee :<span class="comp">*</span>'],
			 	['Head :<span class="comp">*</span>'],
				['Date :<span class="comp"></span>']	
			];

Ext.onReady(function(){
    Ext.QuickTips.init();
    
  
	var allowanceTypestore = new Ext.data.ArrayStore({
           fields: ['allowancetype'],
	       data: [['All'],['Auto'],['Bus'],['Food'],['Petrol'],['Train'],['Stay']]
});

 
  var employeestore = new Ext.data.Store({
			url:'data/getemployee.php', 
	        reader: new Ext.data.JsonReader({			
                fields: ['employee_id','employee_name'],
                root:'employee'
            }),autoLoad:true
        });    
   var startdate = new Ext.form.DateField({
    id: 'startdate',
	labelSeparator:'',	
	fieldLabel :labelArray[2] ,
	name: 'startdate',
	emptyText :'From',
	allowBlank:true,
	vtype: 'daterange',
	endDateField:'enddate'
});	


var enddate = new Ext.form.DateField({
    id: 'enddate',
	fieldLabel: '',
	name: 'enddate',
	emptyText :'To',
	allowBlank:true,
	vtype: 'daterange',
	startDateField: 'startdate' 
});	
	
	var formyearlymonthwise = new Ext.FormPanel({
        labelWidth: 80, // label settings here cascade unless overridden
        url: 'report-from-suppot-expenses-result.php',
		method:'post',
		standardSubmit:true,
        frame:true,
        bodyStyle:'padding:6px 6px 0',
       defaultType: 'textfield',
               items :[{
						   
						xtype       : 'container',
						autoEl      : {},
						border      : false,
						layout      : 'column',
						anchor      : '100%',
						defaultType : 'field',
						items       : [{
										xtype  : 'container',
										layout : 'form',
										columnWidth : .26,
										anchor      : '-50',
										items  : [{ xtype: 'radio',
													  hideLabel: true,
													  name: 'radiotype',
													  checked:true,
													  inputValue: '1',												  
													  labelSeparator:'',	
													  boxLabel :labelArray[0],
													  handler:function(){
														  if(this.checked) {
														
														  }													  	
						 								 }	}
						 						 ,{
													 
											      xtype: 'radio',
												  hideLabel: true,
											      name: 'radiotype',
											      inputValue: '2',
											      boxLabel: 'All',
												   handler:function(){
													if(this.checked) {
													formyearlymonthwise.getForm().findField('employee').disable();	
													 formyearlymonthwise.getForm().findField('employee').reset();	
													  }	
													  else
													  {
													  	formyearlymonthwise.getForm().findField('employee').enable();	
													  }										  	
												  }	
												  
											    }]
									     },
									    {
										xtype       : 'container',
										layout      : 'form',
										columnWidth : .7,
										labelWidth: 1,
										items       : [{
												xtype: 'combo',
												name:'employeeid',
												id:'employee',
												hiddenName:'employeehidden',
												store:employeestore,
												displayField: 'employee_name',
												forceSelection:true,
 												valueField: 'employee_id',
												editable:true,
												mode: 'local',
												allowBlank:false, 
												triggerAction: 'all',
												//emptyText: 'Please Select Employee ...',
												width:200,
												listeners:{select:{fn:function(combo, value) 
												{
													Ext.getCmp('emp_name').setValue(combo.getRawValue());
												
													
												}}}
											}]
															   }]
						   
						  											  
						},
						 {
							xtype: 'combo',
							labelSeparator:'',	
							fieldLabel :labelArray[1] ,
							id :'expenses',
							name:'expenses',
							allowBlank:true,
							forceSelection:true,				
							displayField:'allowancetype',
							valueField: 'allowancetype',
							width: 200
							,triggerAction:'all'
							,mode:'local'
							,store: allowanceTypestore
                       },
					    {
						xtype       : 'container',
						autoEl      : {},
						border      : false,
						layout      : 'column',
						anchor      : '100%',
						defaultType : 'field',
						items       : [{
										xtype  : 'container',
										layout : 'form',
										columnWidth : .61,
										items  : [startdate]
									     },
									   {
										xtype       : 'container',
										layout      : 'form',
										columnWidth : .39,
										labelWidth: 1,
										items       : [enddate]
									   }]
		             },
						{
						xtype: 'textfield',
						name: 'emp_name',
						id:'emp_name',
						hidden:true
		    		}
					]	
    });
    
	var monthwiseWindow = new Ext.Window({
        title: 'Support Expenses Report',
		width:340,		
		height:200,		
		border: false,
		modal:true,
		layout: 'fit',
		closeAction:'close',
		collapsible:true,
		items: formyearlymonthwise,
		buttonAlign: 'center',
	    buttons: [
						{
							text:'View Report',
							iconCls:'icon-view',
							tabIndex:4,
							handler: function()
							{		
								formyearlymonthwise.getForm().submit();	
							}
						},
						{
						text: 'Reset', 
						iconCls:'icon-reset',
						handler: function () {   
												 formyearlymonthwise.getForm().reset();
									 }
						},
						{
					text: 'Close',
					iconCls:'icon-close',
						handler: function () {   
						monthwiseWindow.close();
											 }
					   }
					]

	});
	var varWidth =  (screen.width - monthwiseWindow.width)/2;
	monthwiseWindow.setPosition(varWidth,((screen.height/4)-110));
	monthwiseWindow.show();
	}); 
