Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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()
hal_sk
Georepublic Japan CEO http://georepublic.co.jp/, Code for Japan 代表理事 http://code4japan.org/, Detailed profile: http://jp.linkedin.com/in/halsk/ お仕事の依頼は info@georepublic.co.jp までお願いします。
http://www.georepublic.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away