1. #1
    Ext User
    Join Date
    Feb 2009
    Posts
    11
    Vote Rating
    0
    snappersdad is on a distinguished road

      0  

    Question Calling a method on click from browser's back button

    Calling a method on click from browser's back button


    All,

    Being a newbie to ExtJS, I need some insight into how to accomplish what I need to do.

    Simply put I have an existing page which runs and I want to accomplish the following:
    • When the user clicks the browser's back button I would like to run a method in an already existing object
    Specifically, I have the following skeleton for "trapping" when the browser's back button is fired:

    Ext.EventManager.on( window,
    'beforeunload',
    function() {
    /* call another method */
    } );

    The 'call another method' part is what I am having problems with. I can of course get a simple alert to work, but all my attempts to execute a method in another block of code that 'Extends' a Panel have failed.

    Thanks in advance for any suggestions.
    Last edited by tryanDLS; 5 Feb 2009 at 8:57 AM. Reason: Moved from 1.x to 2.x

  2. #2
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    Since the problem formulation is kinda vague here is a random shot:

    Showing a modal Ext.Window or Ext.Panel that asks the user whether he really wants to leave the page cannot work. It does not work, because such a window is not really modal. Ext can only simulate a modal dialog. That's a limitation (or is it?) of the browsers that Ext cannot do something about.

    All you can do is use a confirm() dialog box to ask the user if he really wants to leave the page and if he clicks the cancel button you can stop the beforeunload event.

    If I misunderstood the question please try to be more specific.
    Daniel Jagszent
    dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address

  3. #3
    Ext User
    Join Date
    Feb 2009
    Posts
    11
    Vote Rating
    0
    snappersdad is on a distinguished road

      0  

    Default


    Thanks for the quick reply Daniel and I apologize for the "vague" description.

    After doing some more reading, I think what I want to say is that I am trying to call a method defined in another object.

    When the unload event occurs, control is passed into that little snippet I posted. The issue is how to call on a method in another object?

    Hopes this clarifies...

  4. #4
    Ext User
    Join Date
    Feb 2009
    Posts
    11
    Vote Rating
    0
    snappersdad is on a distinguished road

      0  

    Default


    I have tried various combinations of the following syntax:

    <namespace>.<object name>.<method name>

    but the method name never seems to get recoginized

  5. #5
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    Just call it. It will work. Only problem is, that immediately after the event handler the page gets unloaded and you script will get terminated. Pending AJAX calls for example are aborted.

    What exactly are you trying to do in the method of this other object? Give us some code samples that we can work with, please.
    Daniel Jagszent
    dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address

  6. #6
    Ext User
    Join Date
    Feb 2009
    Posts
    11
    Vote Rating
    0
    snappersdad is on a distinguished road

      0  

    Default


    Here is some code to help clarify things:

    When the user clicks on the browser's back button control ends up here:

    Ext.EventManager.on( window,
    'beforeunload',
    function() {
    /* want to call a method in another object */
    } );

    The "other object" starts like this:

    Ext.extend(jess.NominationEditorPanel, Ext.Panel, {
          /* Does a bunch of other stuff and then defines the metod of interest */

          hasUnsavedChanges: function(){
          return( /* true if there are unsaved changes */ );
          },
                /* and then ends */

                What I am trying to do is replace the "want to call a method in another object" with the following:

                "jess.NominationEditorPanel.hasUnsavedChanges()"

                However, my syntax is incorrect because I keep seeing in the Firebug console that hasUnsavedChanges() is not a method.

              • #7
                Ext JS Premium Member dj's Avatar
                Join Date
                Mar 2007
                Location
                Germany
                Posts
                573
                Vote Rating
                2
                dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

                  0  

                Default


                Somewhere in your code you probably create a jess.NominationEditorPanel object. Save that object to a variable and call the hasUnsavedChanges() method of this object. Something along this lines:

                Code:
                Ext.extend(jess.NominationEditorPanel, Ext.Panel, {/* Does a bunch of other stuff and then defines the metod of interest */ 
                
                  hasUnsavedChanges: function(){
                    return( /* true if there are unsaved changes */ );
                  }
                /* and then ends */
                });
                
                var myNominationEditorPanel = new jess.NominationEditorPanel({
                /* config options like renderTo and such */
                });
                
                Ext.EventManager.on( window,
                'beforeunload', 
                function() {
                return !myNominationEditorPanel.hasUnsavedChanges();
                } );
                In the code you posted, you are trying to call the method on the class itself, not on an instance of that class.


                Further reading:
                http://extjs.com/learn/Manual:Intro
                http://extjs.com/learn/Manual:Resources#OO_JavaScript
                Daniel Jagszent
                dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address

              • #8
                Ext User
                Join Date
                Feb 2009
                Posts
                11
                Vote Rating
                0
                snappersdad is on a distinguished road

                  0  

                Default


                Thank You for all the help so far.

                I don't mean to sound too dense but this is my first time using ExtJS and it is quite confusing to me.

                The following is the code where I believe the jess.NominationEditorPanel is being created. I've bolded and highlighted what I think is the important part.

                Ext.onReady(function(){
                Ext.QuickTips.init();
                var viewport = new Ext.Viewport({
                layout: 'fit',
                //style: "margin: 2px",
                items: [
                new jess.NominationEditorPanel()
                ]
                });
                });

                So, with this additional information can you point out to me again please where I want to create the variable?

              • #9
                Ext JS Premium Member dj's Avatar
                Join Date
                Mar 2007
                Location
                Germany
                Posts
                573
                Vote Rating
                2
                dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

                  0  

                Default


                Oh, BTW, welcome to the forums! On a second read my posts are kinda brusque, sorry for that, that wasn't my intention.

                The JavaScript object model (prototype based) is quite different from the one that is common. Ext tries to emulate the common class/object model but it helps to understand the JavaScript-way of doing things. The links I posted in my last reply are some first pointers to get a grasp of it. When you want to use the Ext framework efficiently, you have to read, read and read...


                One way (the easiest) to get a reference to the object is to use a global variable:
                Code:
                var myNominationEditorPanel; // this is the global variable
                // ...
                Ext.onReady(function(){
                  Ext.QuickTips.init();
                  myNominationEditorPanel = new jess.NominationEditorPanel(); // here we assign the value to the global variable. Note: it's not "var myNominationEditorPanel = ..."
                  var viewport = new Ext.Viewport({
                    layout: 'fit',
                    //style: "margin: 2px",
                    items: [myNominationEditorPanel]
                  });
                });
                // ...
                Ext.EventManager.on( window,'beforeunload', function() {
                  return !myNominationEditorPanel.hasUnsavedChanges(); // and here we use the global variable
                });

                PS: Please use code-tags when you post code: http://extjs.com/forum/misc.php?do=bbcode#code
                Daniel Jagszent
                dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address

              • #10
                Ext User
                Join Date
                Feb 2009
                Posts
                11
                Vote Rating
                0
                snappersdad is on a distinguished road

                  0  

                Default


                Thank You, Thank You Thank You!
                A thosuand times Thank You!

                The code snippet you provided works wonderfully!

                Now, I am on to throwing up an alert box.

                Thank You again,
                Snappersdad

              Thread Participants: 3