Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
02/05/2018

Implementing Master-Detail by using Navigation Views

Page of 168

Instantiating a Navigation View

Ext.navigation.View (xtype: navigationview) is an Ext.Container with a card layout that automatically generates a docked toolbar containing a "back" button. Navigation Views enable you to easily push and pop views to/from the "card deck", making them particularly useful when implementing data-drilldown / master-detail interfaces.

Note that you cannot instantiate a navigationview as a child of another navigationview.

You would typically define a navigation view as follows:

Ext.define('FriendsWithBeer.view.MyNavigationView', {
 extend: 'Ext.navigation.View',
 alias: 'widget.mynavigationview',
 requires: [
  'FriendsWithBeer.view.beers.List'
 ],

 config: {
  items: [
   {
    xtype: 'beerlist',
    title: 'Beers'
   }
  ]
 }
});

You may configure the following class-specific configuration properties:

Config
Property
Description
items Array. The child items for the navigation view. Each component is displayed as part of the card view. If you want a title to be displayed in the navigation bar, you should specify a title config property for the item member. Only one item will be displayed at a time.
defaultBackButtonText String. The text to be displayed for the back button if the previous view does not have a title. Defaults to "Back"
useTitleForBackButtonText Boolean. Set to false if you always want to display the defaultBackButtonText as the back button's text label.
navigationBar Boolean/Object. Enables you to configure the automatically generated titlebar. Defaults to {docked: 'top'}

Pushing Views onto the Stack

Push items onto the component using the push() method as illustrated below:

navView.push({
 xtype: 'container',
 html: 'Another container'
});

Popping Views from the Stack

Pop items from the stack using the pop() method as illustrated below:

navView.pop();

The pop() method removed the currently active view from the stack and sets the previous view as active. You can also specify either an integer as an argument to pop a specified number of views or you use an Ext.ComponentQuery expression to pop cards until the specified expression is met.

Destroying Popped Views

Views that have been popped are not destroyed by default. They are simply removed from the layout. In order to recover the memory used by a popped view you can either set the autoDestroy: true config property on your navigationview or you can define an event handler on the navigationview's pop event as illustrated below:

Ext.define('MyApp.controller.Beers', {
 extend: 'Ext.app.Controller',
 
 config: {
  models: ['Beer'],
  stores: ['Beers','Excuses' ],
  views: [
   'beers.List',
   'beers.FriendsList',
   'friends.Detail'
  ],
  refs: {
   searchByBeerView: 'navigationview#searchbybeer',
  },

  control: {
    searchByBeerView: {
      pop: 'onSearchByBeerPop'
    }
   }
  },

  onSearchByBeerPop: function(navigationView, view, options) {
    view.destroy();  // destroy popped view
  }
});
Page of 168
comments powered by Disqus