您的位置:首页 > 博客中心 > 互联网 >

关于几个类型的Ext.MessageBox使用方式总结

时间:2022-04-27 07:16

//消息框
function extjsAlert(){
    
    Ext.MessageBox.alert("提示框","这是一个提示框",function(){
    
        alert("提示框已经关闭");
    })

}
//输入框

function extjsPrompt(){
    
    Ext.MessageBox.prompt("输入框","请输入您的姓名:",function(btn,txt){
    
        Ext.MessageBox.alert("结果","您点击了"+btn+"按钮,输入的内容为 "+txt);
    })

}
//Ext.MessageBox.prompt(String title,String msg,Function fn,Object scope,Boolean/Number multiline)
//从定义来看,最后的一个参数,如果为ture或者为数字,则将允许输入多行或者指定默认的高度
function extjsPrompt2(){
    
    Ext.MessageBox.prompt("输入框","请输入您的姓名:",function(btn,txt){
    
        Ext.MessageBox.alert("结果","您点击了"+btn+"按钮,输入的内容为 "+txt);
    },this,300);

}
//确认框
function extjsConfirm(){
    
    Ext.MessageBox.confirm("确认","这点击按钮作出选择",function(btn){
    
        Ext.MessageBox.alert("您点击的按钮是:"+btn);
    })

}
//会飞的消息框
function extjsAnimal(){
  var config = {
        title :"飞出的消息框",
        msg : "你猜他什么时候飞过来?",
        width:300,
        multiline:true,
        closable:true,
        buttons:Ext.MessageBox.YESNOCANCEL,
        icon:Ext.MessageBox.QUESTION,
        animEl:"fly"//fly 为按钮的id
  
  }
  Ext.MessageBox.show(config);



}
//自定义消息框,Ext.MessageBox.show(Object config)可是自定义消息框,
//config这个参数包络万象,使用json格式传输信息到方法中即可
//config的常见属性 :title ,msg,width,multiline,closable,buttons,icon,fn

function MyExtjsBox(){

    var config = {
    
        title:"自定义对话框",
        msg:"喜欢自定义的框框吗?",
        width:300,
        multiline:false,
        closable:false,
        buttons:Ext.MessageBox.YESNOCANCEL,
        fn:function(btn,txt){
            console.log(btn);
            Ext.MessageBox.alert("提示","您点击了"+btn+"按钮,输入的值是:"+txt);
        
        }
    
    
    }
    Ext.MessageBox.show(config);

}

//进度条对话框,也是一个自定义的消息框,配置config的时候添加了progress=true即可,同时还可以设置其他的相关信息
function extjsProgress(){

    var config={
    
        title:"请等待",
        msg:"正在加载项目",
        progressText:"正在初始化...",
        width:300,
        progress:true,
        closable:false
    
    }
    Ext.MessageBox.show(config);
    var f = function(v){
    
        return function(){
            if(v==12){
                Ext.MessageBox.hide();
                Ext.MessageBox.alert("完成","所有项目加载完成");

            }else{
            
                var i= v/11;
                Ext.MessageBox.updateProgress(i,Math.round(100*i)+‘%已完成‘);
            
            }
        
        
        }
    
    
    }
    for(var i=1;i<13;i++){
    
        setTimeout(f(i),i*500);
    }


}

测试:



    Ext Buttons
    
    
    
     


消息框测试







 

本类排行

今日推荐

热门手游