Ext.navigation.View の Back ボタンを上書きする

Sencha Touch2 で導入された navigationBar は、Viewport: setActiveItem や Viewport:add を呼び出すと勝手に History を追加してくれて、Back ボタンで戻れるようにしてくれるが、routes と this.redirectTo を使ってブラウザのBackボタンで戻れるようにしている場合、Back ボタンを使って戻ってもURLを変更してくれない。これが不都合な場合、Back ボタンを上書きする必要がある。

たとえば下記のようにイベントを横取りして

view.Viewport.coffee

Ext.define "Ezuko.view.Viewport",
  extend: "Ext.navigation.View"
  config:
    id: 'viewport'
    fullscreen: true
    layout: 'card'
    navigationBar:
      items: [
        xtype: 'button'
        id: 'top'
        text: 'トップ'
        align: 'right'
        action: 'goTop'
       ]
    onBackButtonTap: () ->
      this.fireEvent 'back', this

以下のようにコントローラーで拾ってあげるといい

controller/Main.coffee

Ext.define 'Ezuko.controller.Main',
    extend: 'Ext.app.Controller'
    config:
      refs:
        viewport: '#viewport'
      control:
        viewport:
          back: 'onBackPressed'
    ###
      back button on toolbar pressed
      this method is called by back event from viewport controller
    ###
    onBackPressed: () ->
      this.getViewport().pop()
      history.back()