var NewsletterForm = new Ext.FormPanel({
  labelWidth: 75,
  frame:true,
  monitorValid:true,      
  bodyStyle:'padding:5px 5px 0',
  width: 250,
  defaults: {width: 150},
  defaultType: 'textfield',
  items: [{
        fieldLabel: 'First Name',
        id: 'first-name-field',
        name: 'first',
        allowBlank: false
      },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false                          
      }, new Ext.form.ComboBox({
        fieldLabel: 'Country',
        name: 'country',
        typeAhead: true,
        triggerAction: 'all',
        forceSelection: true,
        lazyRender: true,
        
        displayField: 'country',
        valueField: 'cid',
        store: new Ext.data.SimpleStore({
             fields:['cid', 'country'],
             data: countries
        }),
        mode:'local',
        value: 'GB',
        hiddenName: 'country'
      }), {
        xtype: "label",
        width: 250,
        text: "We do not share your details.",
        cls: 'x-form-item-label x-form-item newsletter-dialog-noshare'                             
      }
  ],
  
  buttonAlign:'center',   
  buttons: [{
      text: 'Go',
      formBind:true,
      handler: function(){
        var emailValue = Ext.getCmp('newsletter-email').getValue();
        NewsletterForm.getForm().submit({

        clientValidation: true,
        url: 'newsletter/register.php',
        params: {
          email: emailValue
        },
        success: function(form, action) {
           Ext.Msg.alert('Thank you', 'A confirmation email has been sent to you.');
        },
        failure: function(form, action) {
          Ext.Msg.alert('Oooops...', action.result.error);
        }
        
        });
        newsletterWindow.hide();
      }
  }]

});

    
var newsletterWindow = new Ext.Window({
    resizable: false,
    layout:'fit',
    title: 'Just a few more details...',
    width:270,
    height:190,
    closeAction:'hide',
    plain: true,
    modal: true,

    items: NewsletterForm
});

newsletterWindow.on('show', function(){
  Ext.getCmp('first-name-field').focus(true, 10);
});