examples/message-box/msg-box.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8     Ext.get('mb1').on('click', function(e){
   9         Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
  10     });
  11
  12     Ext.get('mb2').on('click', function(e){
  13         Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
  14     });
  15
  16     Ext.get('mb3').on('click', function(e){
  17         Ext.MessageBox.show({
  18            title: 'Address',
  19            msg: 'Please enter your address:',
  20            width:300,
  21            buttons: Ext.MessageBox.OKCANCEL,
  22            multiline: true,
  23            fn: showResultText,
  24            animEl: 'mb3'
  25        });
  26     });
  27
  28     Ext.get('mb4').on('click', function(e){
  29         Ext.MessageBox.show({
  30            title:'Save Changes?',
  31            msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
  32            buttons: Ext.MessageBox.YESNOCANCEL,
  33            fn: showResult,
  34            animEl: 'mb4',
  35            icon: Ext.MessageBox.QUESTION
  36        });
  37     });
  38
  39     Ext.get('mb6').on('click', function(){
  40         Ext.MessageBox.show({
  41            title: 'Please wait',
  42            msg: 'Loading items...',
  43            progressText: 'Initializing...',
  44            width:300,
  45            progress:true,
  46            closable:false,
  47            animEl: 'mb6'
  48        });
  49
  50        // this hideous block creates the bogus progress
  51        var f = function(v){
  52             return function(){
  53                 if(v == 12){
  54                     Ext.MessageBox.hide();
  55                     Ext.example.msg('Done', 'Your fake items were loaded!');
  56                 }else{
  57                     var i = v/11;
  58                     Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
  59                 }
  60            };
  61        };
  62        for(var i = 1; i < 13; i++){
  63            setTimeout(f(i), i*500);
  64        }
  65     });
  66
  67     Ext.get('mb7').on('click', function(){
  68         Ext.MessageBox.show({
  69            msg: 'Saving your data, please wait...',
  70            progressText: 'Saving...',
  71            width:300,
  72            wait:true,
  73            waitConfig: {interval:200},
  74            icon:'ext-mb-download', //custom class in msg-box.html
  75            animEl: 'mb7'
  76        });
  77         setTimeout(function(){
  78             //This simulates a long-running operation like a database save or XHR call.
  79             //In real code, this would be in a callback function.
  80             Ext.MessageBox.hide();
  81             Ext.example.msg('Done', 'Your fake data was saved!');
  82         }, 8000);
  83     });
  84
  85     Ext.get('mb8').on('click', function(){
  86         Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
  87     });
  88
  89     //Add these values dynamically so they aren't hard-coded in the html
  90     Ext.fly('info').dom.value = Ext.MessageBox.INFO;
  91     Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
  92     Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
  93     Ext.fly('error').dom.value = Ext.MessageBox.ERROR;
  94
  95     Ext.get('mb9').on('click', function(){
  96         Ext.MessageBox.show({
  97            title: 'Icon Support',
  98            msg: 'Here is a message with an icon!',
  99            buttons: Ext.MessageBox.OK,
 100            animEl: 'mb9',
 101            fn: showResult,
 102            icon: Ext.get('icons').dom.value
 103        });
 104     });
 105
 106     function showResult(btn){
 107         Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
 108     };
 109
 110     function showResultText(btn, text){
 111         Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
 112     };
 113 });