0

私は煎茶が初めてです。Android の戻るボタンを実装するための sencha ルーティング/履歴サポートを理解するのにほぼ 2 日を費やしました。しかし、ナビゲーションは機能していますが、常に空白の画面になってしまいました。私が何をしているのか、またはアプリケーションアーキテクチャの何が問題なのかを見つけるのを手伝ってください。

app.js

Ext.application({
    name: "WorkFlow",

    models: [],
    stores: [],
    controllers: ["WFController"],
    views: ["LoginForm","WorkList"],

    launch: function () {

         var loginForm = {
             xtype: "loginform"
         }; 

         var workList = {
                 xtype: "worklist"
         };

        Ext.Viewport.add([loginForm,workList]);

    // set up a listener to handle the back button for Android 
        if (Ext.os.is('Android')) {

          document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false);  

          function onBackKeyDown(e) {

              e.preventDefault();

              // you are at the home screen
              if (Ext.Viewport.getActiveItem().xtype == loginForm.xtype ) {

              navigator.app.exitApp();
              }else {

                      this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
                      url: 'loginForm'
                  }));
              }
          }
       }

    }
});

LoginForm.js

var formPanel = null;

Ext.define("WorkFlow.view.LoginForm", {
    extend: "Ext.form.Panel",
    alias: "widget.loginform",

    initialize: function () {

     this.callParent(arguments);

     formPanel = Ext.create('Ext.form.Panel', {
            fullscreen: true,

              items: [{
                        xtype: 'titlebar',
                        title: 'Login',
                        docked: 'top'
                    },
                    {
                    xtype: 'fieldset',
                    items: [
                    {
                        xtype: 'textfield',
                        name : 'username',
                        label: 'Username',
                    },
                    {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password',
                    },
                    {
                        xtype: 'textfield',
                        name : 'deviceId',
                        label: 'Device Id',
                    }
                ]
            }]
        });

       formPanel.add({
            xtype: 'toolbar',
            docked: 'bottom',
            layout: { pack: 'center' },
            items: [
                {
                    xtype: 'button',
                    text: 'Login',
                    handler: this.onLoginTap,
                    scope: this
                },
                {
                    xtype: 'button',
                    text: 'Cancel',
                    handler: function() {
                        formPanel.reset();
                    }
                }
            ]
        });

    },

    onLoginTap: function() {
        this.fireEvent("loginCommand", this);
    },

});

WorkList.js

Ext.define("WorkFlow.view.WorkList", {
    extend: "Ext.form.Panel",
    alias: "widget.worklist",
   config:{
   html: 'This is worklist...',

   } 
});

WFController.js

Ext.define("WorkFlow.controller.WFController", {
    extend: "Ext.app.Controller",

     config: {
          refs: {

            loginForm: "loginform",
            workList: "worklist",
        },
        control: {
            loginForm: {
                loginCommand: "onLoginCommand",
            }
        },
        routes: {
            'loginForm': 'activateLoginFormPage'
        }
    },
    activateLoginFormPage: function(){
            Ext.Viewport.animateActiveItem(this.getLoginForm(), this.slideRightTransition);    
    },

     slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },

   onLoginCommand: function () {

      var values = formPanel.getValues();
     window.plugins.AuthPlugin.authenticate(values.username,values.passwordvalues.deviceId,values,
      function loginCallBack(result){

           if(result=="PASSWORD_MATCH"){

            loginForm.onLoginSuccess();
           }
        });
    },

     onLoginSuccess: function(){

    this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
    url: 'loginFormroute/workList'
    }));

       Ext.Viewport.animateActiveItem(this.getWorkList(), this.slideRightTransition);     
    },

    launch: function () {
    },
    init: function () {
    }
});
4

1 に答える 1

1

何を達成しようとしているのか完全にはわかりませんが、通常のナビゲーション (戻るを押して前のタブに戻るなど) である場合は、Android の戻るボタンに何もバインドする必要はありません。ルートを使用し、ユーザーが実行するすべてのステップに対して履歴項目を作成する必要があります。

例: 2 つのタブを持つアプリがあり、タブの 1 つには場所のリストがあり、2 つ目のタブには同じ場所がマークされた地図があります。リストアイテムまたはマップ内の場所をウィザーで押すと、同じ詳細画面が生成されます。だから、これは私がこれを機能させるために得たものです:

ルート:

    routes: {
        'tab/:tabId': 'gotoTab',
        'details/:stnId': 'viewDetails'
    },

重要な部分:各ステップの履歴項目を必ず作成してください。基本的に、このアプリには 2 つの項目があり、1 つはタブを変更するためのもので、もう 1 つは詳細ページを開くためのものです。したがって、タブ:

//If I change to the 'map' tab, it will navigate the browser to myapp.com/#tab/map
// and therefore creating a history item.
onTabpanelActiveItemChange: function(container, value, oldValue, options) {
    this.getApplication().getHistory().add(new Ext.app.Action({
        url: 'tab/' + value.id
    }), true);
},

私の詳細ページでも同様ですが、2 つの個別のハンドラー (リスト用とマップ用) から呼び出される関数のみです。

showDetails: function(record, staticUrl, doUpdate) {
/*some logic stripped out*/
  this.getApplication().getHistory().add(new Ext.app.Action({
      url: 'details/' + record.data.id
  }), true);
}

この後、ユーザーが常にメイン ページから開始することを保証できれば、ほぼ準備完了です。ディープリンクなどを有効にする場合は、それらのリンクの状態を復元する必要があります。たとえば、#/tab/map/ リンクは、マップ タブがアクティブな状態でアプリを開く必要があります。

私の詳細ページを例にとると、やるべきことがいくつかあります。まず、履歴を再作成し (アプリのデフォルトで詳細ページに戻るとタブ リストに戻ります)、ストアがロードされていることを確認します。

最後の例として、私のviewDetailsルート：

    var store = Ext.StoreManager.get("dcStations");
//recreate history
this.getApplication().getHistory().add(new Ext.app.Action({
    url: 'tab/list'
}), true);
this.getApplication().getHistory().add(new Ext.app.Action({
    url: 'details/' + stnId
}), true);
//make sure the store is loaded, then show the details page with passed id
store.on("load", function() {
    this.showDetails(Ext.StoreManager.get("dcStations").getById(stnId));
}, this);

これにより、ルートと履歴管理を開始するための努力が促進されることを願っています

于 2012-09-08T22:31:15.313 に答える