Ext.MessageBox

 1//Ext.MessageBox.alert()
 2Ext.MessageBox.alert('标题','内容',function(btn){
 3    alert('你刚刚点击了' + btn);
 4}
);
 5
 6//Ext.MessageBox.confirm()
 7Ext.MessageBox.confirm('选择框','你到底是选择Yes还是No?', function(btn) {
 8    alert('你刚刚点击了' + btn);
 9}
);
10
11//Ext.MessageBox.prompt()
12Ext.MessageBox.prompt('输入框','随便输入一些东西', function(btn,text) {
13    alert('你刚刚点击了' + btn + ", 刚刚输入了" + text);
14}
);
    
对话框的更多配置

 1//可以输入多行的输入框
 2Ext.MessageBox.show({
 3    title:'多行输入框',
 4    msg:'你可以多输入好几行',
 5    300,
 6    buttons:Ext.MessageBox.OKCANCEL,
 7    multiline:true,
 8    fn:function(btn,text){
 9        alert('你刚刚点击了' + btn + ", 刚刚输入了" + text);
10    }

11}
);
12
13//自定义对话框的按钮
14Ext.MessageBox.show({
15    title:'随便按个按钮',
16    msg:'从三个按钮里随便选择一个',
17    buttons:Ext.MessageBox.YESNOCANCEL,
18    multiline:true,
19    fn:function(btn){
20        alert('你刚刚点击了' + btn);
21    }

22}
);

    Ext.MessageBox中预设的4个按钮分别是OK,Yes,No,Cancel。如果不使用YESNOCANCEL这种预设变量,也可以直接使用{ok:true, yes:true, no:true,cancel:true}的形式,这样4个按钮都会显示在对话框中。

进度条

 1Ext.MessageBox.show({
 2    title:'请等待',
 3    msg:'读取数据中',
 4    240,
 5    progress:true,
 6    closable:false  //隐藏对话框右上角的关闭按钮,从而禁止用户关闭进度条
 7}
);
 8
 9//也可以直接使用Ext.MessageBox.progress()
10Ext.MessageBox.progress('请等待',msg:'读取数据中');
11

    上述的进度状态时不会发生变化的,我们需要调用Ext.MessageBox.updateProgress()函数,如以下为每秒变化,10秒后隐藏:

 1var f = function(v){
 2    return function(){
 3        if (v == 11{
 4            Ext.MessageBox.hide();
 5        }
 esle {
 6            Ext.MessageBox.updateProgress(v/10,'正在读取第' + v + '个,一共10个');
 7        }

 8    }
;
 9}
;
10for (var i = 1 ; i < 12 ; i++{
11    setTimeout(f(i) , i*1000);
12}

    还可以使用一种自动变化的进度条提示框,如Ext.MessageBox.wait('请等待', msg: ' 读取数据中');

动画效果
    
可以为对话框这是弹出和关闭的动画效果,使用animEl参数指定一个HTML元素,对话框就会依据指定的HTML元素播放弹出和关闭的动画。

窗口分组

 1        <script type="text/javascript">
 2var i = 0 , mygroup;
 3
 4function newWin(){
 5    var win = new Ext.Window({
 6        title:'窗口'+ i++,
 7        400,
 8        height:300,
 9        maximizable:true,
10        manager:mygroup
11    }
);
12    win.show();
13}

14
15function toBack(){
16    mygroup.sendToBack(mygroup.getActive());
17}

18
19function hideAll(){
20    mygroup.hideAll();
21}

22
23Ext.onReady(function(){
24    mygroup = new Ext.WindowGroup();
25
26    Ext.get("btn").on("click",newWin);
27    Ext.get("btnToBack").on("click",toBack);
28    Ext.get("btnHide").on("click",hideAll);
29}
);
30        </script>
31
32 <BODY>
33    <input id="btn" type="button" name="add" value="新窗口"/>
34    <input id="btnToBack" type="button" name="btnToBack" value="放到后台"/>
35    <input id="btnHide" type="button" name="btnHide" value="隐藏所有"/>
36 </BODY>

    示例中,所有通过newWind()方法产生的窗口都属于mygroup窗口组