• Skills required:
    Basic coding concepts
  • Time required:
    15 minutes

The Navigation View consists of a Card Layout, so only one view is visible at a time. But the NavigationView also adds extra functionality to allow pushing and popping of views.

When you do this, the Navigation View will automatically animate between the current active view and the new view that’s pushed to it.

Here are the steps for recreating this Sencha Architect example project:

  1. Add a NavigationView
  2. Add a Form Panel to the NavigationView
  3. Set title of the Form Panel to “Login”
  4. Add a Text Field – set label to Login
  5. Add a Password Field – set label to Password
  6. Add a Button – set text to Login
  7. Change defaults on the Form Panel to:
{ labelWidth: "40%" }
  1. Add a new Panel to root of the project
  2. Set padding to 12px
  3. Set html to “Logged in!”
  4. Set userClassName to “Introduction”
  5. Add a new tap Event Binding to the button, with the following code. This loads the panel using the full class name:
this.push(Ext.create("MyApp.view.Introduction", {
    title: "Introduction"

You can use the Back Button to pop the current view, or pop it manually by referencing the Navigation View and calling the “pop” method.