Question

I want to call my controller when users click backward and forward. But I cannot access my controller in window.onpopstate. I also tried to put my controller into history state data, but it causes an error.

1. Try to access my controller in onpopstate:

   Ext.define('PageController',{
       extend:'Ext.app.Controller',
       onLaunch:function(){
           window.onpopstate = this.onPopState; //trigger the onPopState function when backward and forward
           window.history.pushState(null, '', '/');
       },
       onPopstate:function(s){
           this.someFunction(); //"this" is not PageController, it's PopStateEvent
       },
       someFunction:function(){...}
   });
   

2. Try to put my controller into state:

   Ext.define('PageController',{
       extend:'Ext.app.Controller',
       onLaunch:function(){
           window.onpopstate = this.onPopState; //trigger the onPopState function when backward and forward
           window.history.pushState({'controller':this}, '', '/'); //try to put my controller into state data, which causes error
   
       },
       onPopstate:function(s){
           s.state.controller.someFunction();
       },
       someFunction:function(){...}
   });
   

The error in firebug :
Uncaught Error: DATA_CLONE_ERR: DOM Exception 25

Then, how can I access my controller in window.onpopstate ?
Or is it possible to add a listener to backward and forward event in my controller?

Answer 1

I found the solution finally! Write the following code in my controller :

window.onpopstate = Ext.bind(this.onPopState, this);

That can change the function scope to my controller, then I can call my controller in onpopstate!