ExtJS 4.0 基本功能

一：ExtJS 组件配置方式
1、使用逗号分隔参数列表配置组件 eg: Ext.Msg.alert(“提示”,”您好”);
2、使用JSON对象配置组件
     Eg: var config={// 定义配置对象
        title:’case01’,
       msg:’JSON对象配置组件’
      }
     Ext.Msg.show(config);//将配置传入方法中
二：信息提示框组件介绍
    认识Ext.window.MeessageBox （即Ext.Msg）工具类与JavaScript提供的原始信息提示框的差别，主要表现在：
    实现方式：标准Js提供的信息提示框是一个真正的弹出窗口。
而Ext.Msg提供的信息提示框并不是真正的窗口，只是在当前页面显示的一个层，所以无法用捕捉软件来得到它。
    显示信息的格式：标准Js提供的信息提示框中所显示的内容不是HTML格式文本，而是纯文本：不能用HTML中的格式化方式格式化方法进行排版，只能以空格、回车以及各种标点来构建显示格式。而Ext.Msg 提供的信息提示框显示的文本不仅支持纯文本显示还支持使用HTML格式文本。
    对程序运行的影响：标准JS提供的信息提示框会对JS程序的运行产生阻塞。而Ext.Msg是异步的，它的调用并不会挺直浏览器中代码的执行。如果希望在信息提示框出现并且用户做出反馈后才能调用程序，就需要把相应的程序组织成一个函数，并且将该函数作为回调函数提供给Ext.Msg，在用户做出反馈后，该回调函数将被调用，这样就可以达到控制程序执行的目的了。
   1、Ext.MessageBox.alert():一个只读信息框，用来代替JS标准的alert()，有一个确定按钮，如果为其提供一个回调函数，则该函数将在单击按钮后被调用（不包括上角的退出按钮），所以单击按钮的id将被作为唯一的参数传递到回调函数中。
  Confirm:确认输入框：
   Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack1);
function callBack1(id){
   alert('单击的按钮ID 是：'+id);
}
   2、Ext.MessageBox.prompt(title,msg,回调函数,scope, [Boolean/Number multiline：设置为false,将显示一个单行文本域，设置为true将以默认高度显示一个多行文本区],[用户输入的默认值]):显示一个获取用户输入的提示框，有两个按钮“确定”和“取消”，并提供文本输入框接收用户的输入，如果为其提供一个回调函数，则该函数在单击按钮后被调用，所以单击按钮的Id和文本框中的内容将被作为参数传递到回调函数中。
     Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack2,this,true,'我是默认值');
function callBack2(id,msg){
   alert('单击的按钮ID 是：'+id+' 输入的内容是：'+msg);
}
   3、Ext.MessageBox.wait(msg,title,[Object config:用于配置进度条的配置对象])
Eg: Ext.MessageBox.wait('请等待，操作需要很长时间','提示',{
  text:'进度条上的文字'
});
    Eg: //进度框
Ext.MessageBox.wait('请等待，操作需要很长时间','提示',{
  text:'进度条上的文字'
});
   4、Ext.MessageBox.show方法，不但可以配置提示标题、提示信息、回调函数等常见部分，还提供了配置按钮文字及提示图标的方法，给了我们控制信息提示框的各种可能性。

   改变默认的按钮文字：Ext.MessageBox.msgButtons[i].setText(‘文本’);// i:0,1,2,3  ok：0 ;yes:1;no:2;cancel:3

   动态更新提示框信息：更新提示文字：updateText([String text]):text是显示的信息内容，返回值是Ext.window.MessageBox
    Eg: //动态更新提示框
  var msgBox=Ext.MessageBox.show({
  title:'提示',
  msg:'动态更新的信息文字',
  modal:true,
  buttons:Ext.Msg.OK,
  fn:function(){
   //停止定时任务
   Ext.TaskManager.stop(task);
  }
})
//Ext.taskManager是一个功能类，用来定时执行程序
//定时触发提示信息的更新
var task={
  run:function(){
  msgBox.updateText('会动的时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
},
interval:1000
}
  Ext.TaskManager.start(task);

   更新进度条以及提示信息
     updateProgress(Number value,String progressText,String msg)，该方法在progress：true的情况下会生效。Value：0~1，默认为0；progressText：进度条上显示的文字；msg:显示的信息内容
     返回值：Ext.window.MessageBox
     Eg: //更新进度条提示信息
   var msgBox=Ext.MessageBox.show({
    title:'提示',
msg:'动态更新的进度条和信息文字',
modal:true,
width:300,
progress:true
   })
   var count=0;//滚动条被刷新的次数
    var percentage=0;//进度百分比
    var progressText='';//进度条信息
    var task={
     run:function(){
count++;
percentage=count/10;
//生成进度条文字
progressText='当前完成度：'+percentage*100 +"%";
//更新信息提示框
msgBox.updateProgress(percentage,progressText,'当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
//刷新10次后关闭信息提示框
if(count>10){
  Ext.TaskManager.stop(task);
  msgBox.hide();
}
},
interval:1000
   }
   Ext.TaskManager.start(task);
    5、3. 进度条：Ext.ProgressBar,是一个可更新的进度条组件，具有2种不同的模式：手动模式和自动模式。
手动模式：程序员需要自己控制进度条的显示、更新、清除；在自动模式中，只需调用wait方法，进度条就会自动无限制地滚动下去，适合为长时间的同步操作进行提示。
手动模式的进度条：updateProgress([Float value:0~1],[String text:进度条上显示的文字],[Boolean animate:是否使用动画效果，默认false])，适用于可以掌握程序执行状态的长时间操作。
Eg:   //手动模式进度条实例
        var ProgressBar=new Ext.ProgressBar({
         width:300,
         renderTo:'ProgressBar'
        });
        var count=0;//滚动条刷新的次数
         var percentage=0;//进度百分比
         var progressText='';//进度条信息
         Ext.TaskManager.start({
          run:function(){
           count++;
           //刷新10次后关闭信息提示框
           if(count>10){
            ProgressBar.hide();
           }
           //计算进度
           percentage=count/10;
           progressText=percentage*100+'%';
           //更新信息提示对话框
           ProgressBar.updateProgress(percentage,progressText,true);
          },
          interval:1000,//设置时间间隔
          repeat:6//设置执行次数
         });
自动模式的进度条：不能准确地反应程序的执行状态，而是给用户提供一个友好的提示，表示正在执行一个耗时的操作，减轻用户的等待感。只调用进度条的wait()方法即可。
       //自动模式进度条
       var ProgressBar1=new Ext.ProgressBar({
        text:'working...',
        width:300,
        renderTo:'ProgressBar1'
       });
      //另外可以自定义进度条的样式，通过cls:’样式名’ 添加到配置中
       ProgressBar1.wait({
        duration:10000,//持续更新10s
        interval:1000,//每1s更新一次
        increment:10,//进度条分10次更新完毕
        text:'waiting',//进度上的文字
        scope:this,//回调函数的执行范围
        fn:function(){
         alert('更新完毕');
        } });