Ext.onReady(function(){
  Ext.QuickTips.init();
  //forms defination
  var contactForm = new Ext.form.FormPanel({
    renderTo: "contact_form",
    id: "contact_ext_form",
    title:"",
    width: 480,
    height: 393,
    bodyStyle: 'padding:10px',
    frame: true,
    collapsible: true,
    url: '/page/send_contact_msg',
    items: [{
      xtype: 'textfield',
      fieldLabel: 'Name',
      name: 'name',
      width: 200,
      allowBlank: false,
      validator: function(){
        if(this.getValue().trim() == ''){          
          this.markInvalid(this.initialConfig.blankText)
          return false
        } else {
          return true
        }
      }
    }, {
      xtype: 'textfield',
      vtype: 'email',
      fieldLabel: 'Email address',
      id: 'email_address',
      name: 'email_address',
      width: 200,
      vtypeText: "invalid email address"
    },{
      xtype: 'numberfield',
      fieldLabel: 'Phone number',
      id: 'phone_number',
      name: 'phone_number',
      width: 200
    },{
      xtype: 'textfield',
      fieldLabel: 'Subject',
      name: 'subject',
      width: 200
    },{
      xtype: 'textarea',
      fieldLabel: 'Content',
      name: 'content',
      width: 300,
      height: 200
    }],
    buttons: [
    {
      text: 'Send',
      type: 'submit',
      handler: function() {
        if (!Ext.isEmpty(Ext.getCmp('phone_number').getValue()) || !Ext.isEmpty(Ext.getCmp('email_address').getValue()))
        {
          if(contactForm.getForm().isValid()){
            contactForm.getForm().submit(
            {
              method:'POST',
              name: 'NewRequest',
              waitTitle:'Connecting',
              waitMsg:'Sending data ...',
              success: function(form, action){
                if(action.result.success == true) {
                  Ext.MessageBox.alert("success", "E-mail has been sent successfully.")
                }
              },
              failure: function(form, action){
                Ext.MessageBox.show({
                  title: 'Error!',
                  msg: 'Please enter all required fields!',
                  buttons: Ext.MessageBox.OK,
                  animEl: 'send',
                  icon: 'error'
                });
              }
            })
          }
        }
        else {
          Ext.MessageBox.alert("Alert","You must fill in either email or phone number!");
        };
      }
    }
    ]
  });

});