日期:2014-05-16  浏览次数:20394 次

ExtJs消息框

//onReady此方法等页面元素加载完后执行我们的代码也是写在这里面

Ext.onReady(function(){ 

  ………

}

1.信息提示框

Ext.MessageBox.alert("提示title","提示内容",function(){  
       alert("提示框被关闭了!");
    });

2.提示输入框

   Ext.MessageBox.prompt("输入框","请输入姓名",function(btn,txt){
       alert("您点击的是:"+btn+",姓名为:"+txt);
    },this,300);

   //方法prompt中的方法为关闭窗口后执行的回调函数

3.自定义消息框

 var config={
           title:"自定义对话框",
           msg:"自定义对话框提示信息",
           width:400,
           multiline:true,    //可以多行
           closable:false,    //不允许关闭
           buttons:Ext.MessageBox.YESNOCANCEL,   //按钮的类型
           icon:Ext.MessageBox.QUESTION,          //提示的图标
           //对话框关闭的时候执行的回调函数
           fn:function(btn,txt){
              Ext.MessageBox.alert("选择的是:"+btn+",输入的是"+txt);
           }
    };
    Ext.MessageBox.show(config);     //显示自定义消息框

4.进度条对话框

showbar=function(){
       Ext.MessageBox.show({
              title:"请等待",
              msg:"正在加载项目",
              progressText:"正在初始化",  //滚动条初始文本
              width:300,
              progress:true,  //有这个属性表示这是一个滚动条
              closable:false
       });
        //自定义一个函数
       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)+"%已完成");
               //Math.round()是一个四舍五入的函数
               //i参数在0-1之间,第二个参数表示滚动的提示信息
              }
           };
       };
         //调用自定义的函数
       for(var i=1;i<13;i++){
           setTimeout(f(i),i*500);
       }
    };

页面的元素为:

<inputtype="button"value="显示滚动条"onclick="showbar();">

5.绑定点击事件

Ext.get("say").on("click",function(){
    var name=Ext.get("name").dom.value;  //获取页面元素的值
    Ext.Msg.alert("问候",name+",你好");
});

页面元素:

<inputtype="text"id="name">&nbsp;<inputtype="button"value="问候"id=&quo