Rendern einer neuen Ansicht, wenn auf eine Schaltfläche geklickt wird

Question

Ich bin ein Neuling mit Sencha 2 und ich suche nach einer Möglichkeit, eine neue Ansicht zu rendern, wenn auf eine Schaltfläche geklickt wird. Insbesondere habe ich diese Ansicht Startseite genannt

Startseite

Ext.define("Blog.view.Home", { 
    extend:'Ext.Panel', 
    xtype:'homepanel', 


    config:{ 
    iconCls:"home", 
    title:"Home", 
    items:[ 
     { 
     defaults:{ 
      iconMask:true 
     }, 
     xtype:'toolbar', 
     title:'Recent Blogs', 
     docked:'top', 
     items:[ 
      { 
      id:'newBlog', 
      xtype:'button', 
      iconCls:'add', 
      handler:function() { 
       //What do I do here? 
      } 
      } 
     ] 
     }, 

     { 
     html:"Recent Blogs" 
     } 
    ] 
    } 
}); 

Und ich möchte, dass Taste, wenn darauf geklickt wird, eine neue Ansicht zu machen. Ich bin mir einfach nicht sicher, wie ich so etwas tun würde. Kann mir jemand einen Zeiger geben? Ist dies der beste Weg, dies zu tun? Soll ich das zu meinem Controller verschieben? Wenn ja, auf welches Ereignis sollte ich hören?

Answer 1

So wie ich es tun (ich lerne auch) ist die Definition der Eigenschaft ‚Aktion‘ meine Taste, zum Beispiel:

{ 
    xtype: 'button' 
    action: 'doSomething', 
} 

und Umgang mit dem Ereignisse in der Steuerungskonfiguration meines Controller:

control: { 
    'button[action=doSomething]' : { 
    tap: function() { 
     getMainView().push(...); 
    } 
} 

in der Prozedur können Sie eine neue Ansicht drücken, wenn Sie die NavigationView verwenden oder eine neue Sicht auf die ViewPort direkt hinzufügen.

Ich hoffe, es hilft.

Answer 2

Die beste Methode, dies in Sencha Touch 2 (die MVC-Muster folgt) zu tun ist, einen Verweis auf Ihre Schaltfläche zu definieren und eine Steuerfunktion in Ihrem Controller zu haften. Zum Beispiel:

refs:{ 
button_which_renders_a_new_view: '#newBlog' //create a reference to your button 

control: { 
button_which_renders_a_new_view: 'create_a_new_view' 
} 

create_a_new_view: { 
// do whatever you want here 
} 

Weitere Details, lassen Sie uns einen tieferen Blick auf diese: http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller