In a Sencha Touch navigation view, have you ever wanted different buttons in the titlebar portion of individual cards? With the activeitemchange listener down below, each card can declare their own navbar buttons (or even other types of widgets) and they'll be automatically appear when that particular card is active.

Card.js

Ext.define("App.view.default.Card", {
	extend: "Ext.List",
	alias: "widget.defaultcard",

	navigationBarItems: [
		{
			text: "Add",
			align: "right",
			eventName: "add"
		}
	]
});

navigationview.js

Ext.define('App.view.AppRoot', {
	extend: 'Ext.navigation.View',
	alias: "widget.approot",
	requires: [
		'App.view.default.Card'
	],

	config: {
		// useTitleForBackButtonText: true,
		items: [
			{
				xtype: 'defaultcard',
				title: "Default Title"
			}
		],
		listeners: {
			activeitemchange: function(nv, newcard, oldcard) {
				var nb = nv.getNavigationBar();
				var tb_l = nb.innerItems[0].innerItems;
				var tb_r = nb.innerItems[2].innerItems;

				// left bar has 'back' button by default, right doesnt
				while (tb_l.length > 1) tb_l.last().destroy();
				while (tb_r.length > 0) tb_r.last().destroy();

				(newcard.navigationBarItems || []).forEach(function(buttonConfig) {
					buttonConfig.handler = newcard.fireEvent.bind(newcard, buttonConfig.eventName, newcard);
					nb.add(buttonConfig);
				});
			}
		}
	}
});

I was getting an error with your example on the back action. Was saying last() is undefined. I got it to work with

while (tb_r.length > 0) {
     tb_r[tb_r.length - 1].destroy();
}