msg-box.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:4k
源码类别:

中间件编程

开发平台:

JavaScript

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