Ext.define('App.view.FromToDateField',{
	extend: 'Ext.form.FieldContainer',
	alias: 'widget.fromToDateField',

	fieldLabel: undefined,
	hideEmptyLabel: true,
	layout: 'hbox',
	config: {
		startName: '',
		endName: '',
		startLabelField: '',
		endLabelField: 'to',
		startWidth: undefined,
		endWidth: undefined,
		startLabelWidth: undefined,
		endLabelWidth: 30,
		labelName: 'From',
		allowBlank: true,
		readOnly: false,
		startMinValue: undefined,
		startMaxValue: undefined,
		startValue: undefined,
		endMinValue: undefined,
		endMaxValue: undefined,
		endValue: undefined,
	},

	initComponent: function() {
		var me = this;

		Ext.applyIf(me, {
			setValue: function(startDate, endDate){
				var me = this;
				me.down('field[name='+me.startName+']').setValue(startDate);
				me.down('field[name='+me.endName+']').setValue(endDate);
			},
			getValue: function(){
				var me = this,
				rs = new Array();
				rs[me.startName] = me.down('field[name='+me.startName+']').getValue();
				rs[me.endName] = me.down('field[name='+me.endName+']').getValue();
				return rs;
			},
			getField: function(){
				var me = this,
				rs = new Array();
				rs[me.startName] = me.down('field[name='+me.startName+']');
				rs[me.endName] = me.down('field[name='+me.endName+']');
				return rs;
			},
			setReadOnly: function(readOnly){
				me.getField().forEach(function(item){
					item.setReadOnly(readOnly);
				});
			},
			setCustomConfig: function(sCfg, eCfg){
				sCfg = sCfg || {};
				eCfg = eCfg || {};
				var me = this;
				Ext.apply(me.down('field[name='+me.startName+']'), sCfg);
				Ext.apply(me.down('field[name='+me.endName+']'), eCfg);
				if (sCfg.flex) me.down('field[name='+me.startName+']').setFlex(sCfg.flex);
				if (eCfg.flex) me.down('field[name='+me.endName+']').setFlex(eCfg.flex);
				if (sCfg.width) delete(me.down('field[name='+me.startName+']').flex);
				if (eCfg.width) delete(me.down('field[name='+me.endName+']').flex);
				if (sCfg.value) me.down('field[name='+me.startName+']').setValue(sCfg.value);
				if (eCfg.value) me.down('field[name='+me.endName+']').setValue(eCfg.value);
			},
			fieldLabel: me.labelName,
			items:[
				{
					xtype: 'datefield',
					name: me.startName,
					fieldLabel: me.startLabelField,
					width: me.startWidth,
					labelWidth: me.startLabelWidth,
					selectOnFocus: true,
					allowBlank: me.allowBlank,
					readOnly: me.readOnly,
					minValue: me.startMinValue,
					maxValue: me.startMaxValue,
					value: me.startValue,
					flex: 5,
					listeners:{
						change: function( field, newValue, oldValue ){
							me.down('field[name='+me.endName+']').setMinValue(newValue);
							me.down('field[name='+me.endName+']').isValid();
						}
					}
				},
				{
					xtype: 'datefield',
					name: me.endName,
					fieldLabel: me.endLabelField,
					width: me.endWidth,
					labelWidth: me.endLabelWidth,
					labelStyle: 'text-align:center;',
					labelSeparator: '',
					selectOnFocus: true,
					allowBlank: me.allowBlank,
					readOnly: me.readOnly,
					minValue: me.endMinValue,
					maxValue: me.endMaxValue,
					value: me.endValue,
					flex: 6,
					listeners:{
						change: function( field, newValue, oldValue ){
							me.down('field[name='+me.startName+']').setMaxValue(newValue);
							me.down('field[name='+me.startName+']').isValid();
						}
					}
				}
			]
		});
		me.callParent(arguments);
	},
	getStartDateField: function(){
		return this.down('field[name='+this.startName+']');
	},
	getEndDateField: function(){
		return this.down('field[name='+this.endName+']');
	}
});