1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    5
    Vote Rating
    0
    kdnyegaard is on a distinguished road

      0  

    Default Getting basic alerts to work

    Getting basic alerts to work


    I can get the ' Ext.MessageBox.alert' to work on our servers using the examples msg-box.js but I can't get it to work by calling it as a function. I am trying to get it to function as a replacement for the standard javascript alert function (no based on a button click), but so far it is a no go.

    These are my includes:
    Code:
    	<link rel="stylesheet" type="text/css" href="/js/resources/css/xtheme-vista.css" /><!-- LIBS -->
     	<script type="text/javascript" src="/js/adapter/ext/ext-base.js"></script>
     	<!-- ENDLIBS -->
    
        <script type="text/javascript" src="/js/ext-all.js"></script>
    
        <script language="javascript" src="/js/examples/dialog/msg-box.js"></script>
    This all checks out.


    I have tried this:
    Code:
    <script language="javascript">
       function alert1(){
    	  Ext.MessageBox.alert('Status', 'Changes saved successfully.');
        };	
    </script>
    and then calling alert1. No go.

    I have tried including this in msg-box.js:
    Code:
        function alert1(){
            Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);	    
        };
    and then calling alert1. No go.


    I have a feeling this is REALLY simple. What am i doing wrong?

    Thanks!
    Last edited by mystix; 1 Aug 2007 at 5:50 PM. Reason: use [code][/code] tags; moved to Help from General

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,050
    Vote Rating
    658
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Post an example page somewhere?

  3. #3
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    I would think it has to do with your includes... probably a bad path. If you're sure it's not the path... try and bring this up in Firefox with Firbug up... you should be able to your js being loaded in the 'Net' tab.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    The real question that you have not answered is where are you calling your alert function from? If you do this, you will get an error:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Test Page</title>
        <script type="text/javascript" src="../_src/1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../_src/1.1/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="../_src/1.0/resources/css/ext-all.css">
    	<script>
        function alert1(){
     	  Ext.Msg.alert('Status', 'Changes saved successfully.');
         };
         alert1();
    	</script>
    </head>
    <body>
    
    </body>
    <script>
    </script>
    </html>
    The reason? Because at the point at which your function is called, the DOM has not finished loading and the document.body object does not yet exist. This is important in this example since MessageBox internally creates a BasicDialog and appends it to the document.body, which in this case, does not exist and this code blows up.

    This version of your code will work as expected:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Test Page</title>
        <script type="text/javascript" src="../_src/1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../_src/1.1/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="../_src/1.0/resources/css/ext-all.css">
    	<script>
        function alert1(){
     	  Ext.Msg.alert('Status', 'Changes saved successfully.');
         };
    	</script>
    </head>
    <body>
    
    </body>
    <script>
         alert1();
    </script>
    </html>
    However, the other lesson here is NOT to do this, and instead to use the Ext.onReady function. This will guarantee that your code does not execute until the DOM is fully loaded. Combined with some of the OO principles that you'll learn as you study Ext more (like avoid global functions!), you should end up with something more like this:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Test Page</title>
        <script type="text/javascript" src="../_src/1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../_src/1.1/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="../_src/1.0/resources/css/ext-all.css">
    	<script>     
            var Example = {
                init : function(){
                    this.alert();
                },
                
                alert : function(){
                    Ext.Msg.alert('Status', 'Changes saved successfully.');
                }
            };
            Ext.onReady(Example.init, Example);
    	</script>
    </head>
    <body>
    
    </body>
    </html>

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    5
    Vote Rating
    0
    kdnyegaard is on a distinguished road

      0  

    Default


    Thanks! That was helpful. I have two questions related to this though:

    1: Unlike a normal alert, the following code blows right by the alert box and goes straight to the location.href:

    <script>
    var Example = {
    init : function(){
    this.alert();
    },

    alert : function(){
    Ext.Msg.alert('Status', 'Changes saved successfully.');
    }
    };
    Ext.onReady(Example.init, Example);
    location.href='/index.htm';
    </script>

    I have a sneaking suspicion that I need to add code in response to a button click?

    2. Using the example above, how do you pass a variable to the alert function to display?

    I tried this, but no cigar:

    var Example = {
    init : function(){
    this.alert();
    },

    alert : function(title, msg){
    Ext.Msg.alert(title, msg);
    }
    };
    Ext.onReady(Example.init, Example ('Alert','File Saved');
    </script>


    Thanks for you help!

  6. #6
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Execution will continue at the line after the call to Ext.Msg.alert(). Take a look at http://extjs.com/deploy/ext-1.1/docs...essageBox.html for more info.

    1. Use the fn param:

    Code:
    Ext.MessageBox.show({
      title: 'Status',
      msg: 'Changes saved successfully.',
      buttons: Ext.MessageBox.OK,
      modal: true,
      fn: function(){
        location.href = 'http://www.google.com';
      }
    });
    2. Your init() is calling alert() with no params. You can change the signature of your init() to take the title and msg:

    Code:
    var Example = {
      init : function(title, msg){
        this.alert(title, msg);
      },
    
      alert : function(title, msg){
        Ext.Msg.alert(title, msg);
      }
    };
    Ext.onReady(Example.init('Alert','File Saved'), Example);

  7. #7
    Ext User
    Join Date
    Jul 2007
    Posts
    5
    Vote Rating
    0
    kdnyegaard is on a distinguished road

      0  

    Default Making headway

    Making headway


    That's much better!

    Now I only have one issue left: the location.href is not firing. If have tried the following:

    <script>
    Ext.MessageBox.show({
    title: 'Status',
    msg: 'Changes saved successfully.',
    buttons: Ext.MessageBox.OK,
    modal: true,
    fn: function(){
    history.go(-1);
    }
    });
    </script>



    <script>

    var Example = {
    init : function(title, msg){
    this.alert(title, msg);
    },

    alert : function(title, msg){
    Ext.Msg.alert(title, msg);
    if (btn == 'ok'){

    fn: function(){
    location.href = 'http://www.google.com'; }
    } }
    };

    Ext.onReady(Example.init('Alert','Saved'), Example);
    </script>

    Neither takes me anywhere. Any clues?

    And thanks for the help. I really appreciate it