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