添加一個按鈕並在視圖之間導航

Question

1.）我需要添加2個按鈕，一個在另一個之下。以下演示我的工作。它只顯示一個按鈕，但是如何在此按鈕下方添加另一個按鈕圖像的另一個按鈕？

2.）當用戶點擊一個按鈕，我需要導航到另一個屏幕。我怎樣才能做到這一點 ？ 我需要以下目標-c代碼的等價物嗎？

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

3.）如何可以添加一個導航欄（相當於在iPhone所示的導航欄）

對於第一問題的代碼;

{ 
       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）爲了得到兩個按鈕一個在另一個之下，可以添加兩個單獨的按鈕（具有不同的UI屬性），其爲形式面板的兒童的。我想，這是你需要的。

就這樣，

.... 
    .... 
    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）爲了您的第二和第三個問題，navigationview是解決方案。 發表於M-x的解決方案很不錯，但是它的先進水平範例&也難以一蹴而就。

這裏是來自Sencha Docs的navigatioview的easy solution。

//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(); 
            } 
           } 
          ] 
         }); 
        } 
       } 
      ] 
     } 
    ] 
}); 

Answer 2

也許導航視圖可以幫你嗎？這是同樣的想法，但它像一個UITableView開始：

http://docs.sencha.com/touch/2-0/#!/example/navigation-view

在應用/控制器/ application.js中，當你在接觸水龍頭，細節視圖被推開。所有的源代碼都在示例目錄中。

 
    onContactSelect: function(list, index, node, record) { 
     var editButton = this.getEditButton(); 

     if (!this.showContact) { 
      this.showContact = Ext.create('AddressBook.view.contact.Show'); 
     } 

     // Bind the record onto the show contact view 
     this.showContact.setRecord(record); 

     // Push the show contact view into the navigation view 
     this.getMain().push(this.showContact); 
    },