examples/message-box/msg-box.js

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