I managed to put together an example by combining the approaches from the 2 links above. Here is the jsfiddle with the ext js script: http://jsfiddle.net/chetanbaheti/zGXr6/3/
There are 2 views (tabs) - home and providers with corresponding history tokens
DemoApp.view.HomeTab
DemoApp.view.ProvidersTab
Each tab is managed by its corresponding controller that's responsible for creating an instance of the view and registering a history token.
DemoApp.controller.HomeController
//and its history token
this.uiToken = 'MainTabPanel,HomeTab';
The job of managing initial ui state is done by the application functions:
initializeHistoryHandling
setUiState
While the job of changing the history token on selecting tabs (by user action) is done by the main view controller:
DemoApp.controller.ViewportController:onTabpanelTabChange
This nicely manages the ui state based on the url and vice versa.