ExtJS3.0之对话框二

注意引入以下两个文件：

否则显示不出效果。这些例子在3.0分发中都有（ext-3.0.0\examples\message-box）。

 

6、Progress Dialog

    Ext 的进度条对话框。看下 面的代码：

 Ext.onReady(function(){
    Ext.get('btn').on('click', function(){
        Ext.MessageBox.show({
           title: 'Please wait',
           msg: 'Loading items...',
           progressText: 'Initializing...',
           width:300,
           progress:true,
           closable:false,
           animEl: 'btn'
       });
       
//     this hideous block creates the bogus progress
       var f = function(v){
            return function(){
                if(v == 12){
                    Ext.MessageBox.hide();
                    Ext.example.msg('Done', 'Your fake items were loaded!');
                }else{
                    var i = v/11;
                    Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
                }
           };
       };
       for(var i = 1; i < 13; i++){
           setTimeout(f(i), i*500);
       }
 
   });
});
 

    Html 页面中的内容：

    执行程序，点击上面的“对话框”按钮，将会在页面上显示如下图所示的对话框。

7、Wait Dialog

    等待对话框。看下面的例子：

 Ext.onReady(function(){
    Ext.get('btn').on('click', function(){
        Ext.MessageBox.show({
           msg: 'Saving your data, please wait...',
           progressText: 'Saving...',
           width:300,
           wait:true,
           waitConfig: {interval:200},
           icon:'ext-mb-download', //custom class in msg-box.html
           animEl: 'btn'
       });
        setTimeout(function(){
            //This simulates a long-running operation like a database save or XHR call.
            //In real code, this would be in a callback function.
            Ext.MessageBox.hide();
            Ext.example.msg('Done', 'Your fake data was saved!');
        }, 8000);
    });
});
 

    Html 页面中的内容：

    执行程序，点击上面的“对话框”按钮，将会在页面上显示如下图所示的对话框。

8、Icons

    下面再看看标准alert框的Icons，我们看下面的代码：

 Ext.onReady(function(){
    //Add these values dynamically so they aren't hard-coded in the html
    Ext.fly('info').dom.value = Ext.MessageBox.INFO;
    Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
    Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
    Ext.fly('error').dom.value = Ext.MessageBox.ERROR;
 
    Ext.get('mb9').on('click', function(){
        Ext.MessageBox.show({
           title: 'Icon Support',
           msg: 'Here is a message with an icon!',
           buttons: Ext.MessageBox.OK,
           animEl: 'mb9',
           fn: showResult,
           icon: Ext.get('icons').dom.value
       });
    });
});
 

    Html 页面中的内容：

     

        Icons

        Standard alert with optional icon.
        
            Error
            Informational
            Question
            Warning
        
        对话框
    

 

    执行程序，点击上面的“对话框”按钮，将会在页面上显示如下图所示的对话框。