UINavigationController implementation for SenchaTouch
SenchaTouch is web development framework for building native-looking mobile apps (iOS & Android) using standards-based web technologies such as HTML5 & CSS3. The Sencha website features several very impressive demos. However, the framework is still in beta and many useful features are either incomplete or missing entirely.
One common interaction in iPhone applications is multi-level navigation which places a back button in the toolbar and allows the user to drill down into the data. In a native app, the UINavigationController class manages this hierarchy of views and asks the currently selected view information about itself for display. For example, the current view may have a navigationTitle of "Tier 1" and its child view may have a navigationTitle of "Tier 2." UINavigationViewController will inspect these views and make sure the correct title is visible in the navigation bar according to the currently selected view. See the diagram below:
SenchaTouch has something similar with the NestedList class which shows a hierarchy of Ext.List panels. However, it would be nice to have something much more generic that allows any type of panel to be placed in the hierarchy. Below this post is the source code for PanelStack which functions much like UINavigationController. Each panel in the stack can push more panels beneath it or pop itself off the stack (identical to pressing the back button). Additionally, each panel is has an animation property which is run on push and reversed on pop making interactions such as flipping a card over to see its back and then returning to the front very easy to accomplish.
How to use PanelStack
var bottomLevel = new Ext.Panel({ title: "Start page" });
var firstLevel = new Ext.Panel({ title: "Tier 1" });
var secondLevel = new Ext.Panel({ title: "Tier 2" });
var controller = new PanelStack({ items: [bottomLevel] });
// Showing the bottomLevel, a title of "Start page" and no back button
controller.pushPanel(firstLevel);
// Showing the firstLevel, a title of "Tier 1" and a "back" button
controller.pushPanel(secondLevel);
// Showing the secondLevel, a title of "Tier 2" and a "back" button
controller.popPanel();
// Showing the firstLevel, a title of "Tier 1" and a "back" button
// Manually tapping the "back" button
// Showing the bottomLevel, a title of "Start page" and no back button