Ext.ns('ES');

ES.physicDatasForm = Ext.extend(Ext.FormPanel,{
  frame:true,
  border:true,
  height:400,
  layout:'table',
  layoutConfig: {columns: 2},
  width: 508,
  autoload:null
  ,buttons: [{text: 'Sauver'}]
  ,initComponent:function() {
     var config = {
      buttonAlign:'right'
      ,frame:false
      ,bodyStyle:'padding:4px'
      ,items:[{
        layout:'form',
        border:false,
        colspan:2
        ,items:[{
          xtype:'datefield'
          ,name:'startdate'
          ,format:'d/m/Y'
          //,labelStyle:'width:100'
          ,fieldLabel:'Depuis'
          ,allowBlank:false
        }]
      },{
         title:'Surfaces : '
        ,xtype:'fieldset'
        ,border:false
        ,autoHeight:true
        ,layout:'form'
        ,bodyStyle:'padding:4px'
        ,labelWidth:130
        ,height:250
        ,defaults:{width:110}
        ,items:[{
            xtype:'ESNumber'
            ,name:'roofarea'
            ,fieldLabel:'Surface du toit [m2]'
            ,allowBlank:false
          },{
            xtype:'ESNumber'
            ,name:'wallarea'
            ,fieldLabel:'Surface des façades [m2]'
            ,allowBlank:false
          },{
            xtype:'ESNumber'
            ,name:'floorarea'
            ,fieldLabel:'Surface au sol [m2]'
            ,allowBlank:false
          },{
            xtype:'ESNumber'
            ,name:'heatedarea'
            ,fieldLabel:'Surface chaufée [m2]'
            ,allowBlank:false
          },{
            xtype:'ESNumber'
            ,name:'windowarea'
            ,fieldLabel:'Surface des fenêtres [m2]'
            ,allowBlank:false
          }]
         },{
           title:'&nbsp '
          ,xtype:'fieldset'
          ,border:false
          ,autoHeight:true
          ,layout:'table'
          ,labelWidth:120
          ,width:70
          ,layoutConfig: {columns: 1}
          ,height:250
          ,bodyStyle:'margin-top:5px'
          ,items:[{
            xtype: 'component',
            name: 'roofareaicon',
            bodyStyle:'margin-bottom:5px',
            autoEl: {
              html: '<div style="margin-bottom:7px">&nbsp;&nbsp;<img src="images/icon_help2.png" alt="" class="middle"/></div>'
            }
          },{
            xtype: 'component',
            name: 'wallareaicon',
            autoEl: {
              html: '<div style="margin-bottom:7px">&nbsp;&nbsp;<img src="images/icon_help2.png" alt="" class="middle"/></div>'
            }
          },{
            xtype: 'component',
            name:'floorareaicon',
            autoEl: {
              html: '<div style="margin-bottom:7px">&nbsp;&nbsp;<img src="images/icon_help2.png" alt="" class="middle"/></div>'
            }
          },{
            xtype: 'component',
            name:'heatedareaicon',
            autoEl: {
              html: '<div style="margin-bottom:7px">&nbsp;&nbsp;<img src="images/icon_help2.png" alt="" class="middle"/></div>'
            }
          },{
            xtype: 'component',
            name:'windowareaicon',
            autoEl: {
              html: '<div style="margin-bottom:7px">&nbsp;&nbsp;<img src="images/icon_help2.png" alt="" class="middle"/></div>'
            }
         }]
        },{
         title:'Autres : '
        ,layout:'form'
        ,xtype:'fieldset'
        ,border:false
        ,autoHeight:true
        ,colspan:2
        ,labelWidth:130
        ,defaults:{width:110}
        ,bodyStyle:'padding:4px'
        ,items:[{
          xtype:'ESNumber'
          ,name:'floornumber'
          ,fieldLabel:'Nombre d\'étages'
          ,allowBlank:false
        },{
          xtype:'ESNumber'
          ,name:'ceilingheight'
          ,fieldLabel:'Hauteur de plafond moyen [m]'
          ,allowBlank:false
        },{
          xtype:'ESNumber'
          ,name:'roomnumber'
          ,fieldLabel:'Nombre de pièces'
          ,allowBlank:false
        },{
          name:'site_id'
          ,fieldLabel:'site_id'
          ,hidden: true
          ,hideLabel: true
        }]
      }]
    };
     // apply config
    Ext.apply(this, Ext.apply(this.initialConfig, config));
    // call parent initComponent
    ES.physicDatasForm.superclass.initComponent.call(this);
    this.doLayout();
  } // end of function initComponent
  ,onRender:function() {
    // call parent
    ES.physicDatasForm.superclass.onRender.apply(this, arguments);
  } // eo function onRender
  ,isPhysicDatasFormValid:function (){
   return(this.getField('roofarea').isValid()
    && this.getField('wallarea').isValid()
    && this.getField('floorarea').isValid()
    && this.getField('heatedarea').isValid()
    && this.getField('windowarea').isValid()
    && this.getField('floornumber').isValid()
    && this.getField('ceilingheight').isValid()
    && this.getField('roomnumber').isValid());
  }
  ,getField:function(fieldName){
    switch(fieldName){
      case 'startdate':
        return this.items.itemAt(0).items.itemAt(0);
      break;
    }
    return this.getForm().findField(fieldName);
  }
  ,getIconHelp:function(fieldName){
    switch(fieldName) {
      case 'roofareaicon':
        return this.items.itemAt(2).items.itemAt(0);
      break;
      case 'wallareaicon':
        return this.items.itemAt(2).items.itemAt(1);
      break;
      case 'floorareaicon':
        return this.items.itemAt(2).items.itemAt(2);
      break;
      case 'heatedareaicon':
        return this.items.itemAt(2).items.itemAt(3);
      break;
      case 'windowareaicon':
        return this.items.itemAt(2).items.itemAt(4);
      break;
      default:
        return this.getForm().findField(fieldName);
      break;
    }
    //return this.getForm().findField(fieldName);
  }
  ,setField:function(fieldName,value){
    this.getField(fieldName).setValue(value);
  }
});

Ext.reg('ESphysicdatasform', ES.physicDatasForm);