Question

1.) I need to add 2 buttons, one below another. My working so far is demonstrated below; It only shows one button, but how can i add another button with a different button image below this button ?

2.) When the user clicks a button, i need to navigate to another screen. How can i do this ?
I need the equivalent of the following objective-c code ?

View1 *view1 = [[View1 alloc] initWithNibName:@"View1" bundle:nil];
            [self.navigationController pushViewController:View1 animated:YES];

3.) How can i add a navigation Bar (equivalent to the navigation bar shown in iPhone)

The code for the 1st question;

{
                items:[
                    {
                        xtype:'button',
                        text: 'Submit',
                        ui:'confirm',
                        handler: function(){
                          var values = Ext.getCmp('contactForm').getValues();

                          Ext.Ajax.request({

                            url: 'http://loonghd.com/service/',

                            failure: function (response) {
 //do something
            },                              success: function (response) {
                                                                         // do something
                            }

                           });
                        }
                    }
                ]

            }

Answer 1

1) For getting two buttons one below the other, you can add two separate buttons (with different ui property) as childs of a form panel. I think, this is what you need.

Just like this,

   ....
   ....
   items : [
       {
         xtype:'button',
         text: 'Submit',
         ui:'confirm', // makes the button color as green
         handler: function(){
            var values = Ext.getCmp('contactForm').getValues();
            Ext.Ajax.request({
                 url: 'http://loonghd.com/service/',
                 failure: function (response) {
                        //do something
                  },

                 success: function (response) {
                         // do something
                 }
            });
           }
          },
          {
              xtype:'button',
              text:'Second button',
              ui:'decline', // makes the button color as red.
              listeners : {
                  tap : function() {
                     Ext.Msg.alert('You just clicked Second button');
                  }
               } 
           } 
  ]
  ....
  ....

2) 3) For your 2nd and 3rd question, navigationview is the solution.
Solution posted by M-x is great, but it’s very advanced level example & also difficult to understand at first instance.

Here’s an easy solution of navigatioview from Sencha Docs.

//create the navigation view and add it into the Ext.Viewport
var view = Ext.Viewport.add({
    xtype: 'navigationview',

    //we only give it one item by default, which will be the only item in the 'stack' when it loads
    items: [
        {
            //items can have titles
            title: 'Navigation View',
            padding: 10,

            //inside this first item we are going to add a button
            items: [
                {
                    xtype: 'button',
                    text: 'Push another view!',
                    handler: function() {
                        //when someone taps this button, it will push another view into stack
                        view.push({
                            //this one also has a title
                            title: 'Second View',
                            padding: 10,

                            //once again, this view has one button
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'Pop this view!',
                                    handler: function() {
                                        //and when you press this button, it will pop the current view (this) out of the stack
                                        view.pop();
                                    }
                                }
                            ]
                        });
                    }
                }
            ]
        }
    ]
});