ExtJS4.0学习笔记一

//Ext.require(['*']);
Ext.onReady(function() {
 Ext.MessageBox.msgButtons[0].setText('确定');  //ok
 Ext.MessageBox.msgButtons[1].setText('接受');  //yes
 Ext.MessageBox.msgButtons[2].setText('取消');  //no
 Ext.MessageBox.msgButtons[3].setText('放弃');  //cancel
 var toolbar = new Ext.toolbar.Toolbar({
  renderTo : 'toolbar',
  width : 800
 });

 toolbar.add([ {
  text : '标准提示框', // 按钮上显示的文字
  handler : extjsAlert, // 单击后调用的函数
  inconCls : 'newIcon' // 按钮上显示的图标
 }, '-', // 加入工具栏分隔符
 {
  text : '确认消息框',
  handler : extjsConfirm,
  inconCls : 'newIcon'
 }, '-', '->',// 加入一个充满工具栏的空白元素
 {
  text : '输入信息提示框',
  handler : extjsPrompt,
  inconCls : 'newIcon'
 }, '-',{
  text : '进度条提示框',
  handler : extjsWait,
  inconCls : 'newIcon'
 }, '-',{
  text : 'show提示框',
  handler : extjsShow,
  inconCls : 'newIcon'
 },'-',{
  text : '更新提示文字',
  handler : extjsRefresh,
  inconCls : 'newIcon'
 }, '-',{
  text : '更新进度条',
  handler : extjsRefreshProgerss,
  inconCls : 'newIcon'
 }]);
 
 function extjsAlert(btn) {
  
  
  
  Ext.MessageBox.alert('提示框名称', '<font color=red>内容,支持HTML格式文本<font>');
  alert('!'); // Ext的消息框是异步执行，不会影响程序的运行，所以如果需要根据提示框的选择结果确定流程，需将选择后的函数放在提示框的回调函数中
 }

 function extjsConfirm(btn) { // 显示YES/NO按钮，做出选择
  
  
  
  Ext.MessageBox.confirm('提示框名称', '请单击我，做出选择', callBack);
  function callBack(id) { // 传入回调函数中按钮id是区分用户选择的唯一方法，通过判断该参数来执行不同的操作
   Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮');
  }
 }

 function extjsPrompt() { // 显示一个获取用户输入信息的提示框，接收用户输入
  
  
  
  Ext.MessageBox.prompt('提示框名称', '请输入...', callBack, this,true, '这是默认值');
  function callBack(id, msg) { // 传入回调函数中按钮id是区分用户选择的唯一方法，通过判断该参数来执行不同的操作
   Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮' + '\n' + '输入内容是：'
     + 'msg');
  }
 }
 
 function extjsWait(btn) { //不能定义一个时间自动关闭
  Ext.MessageBox.wait('正在运行中，请等待...', '提示框名称', {text:'进度条上的文字'});
 }
 
 function extjsShow(btn) { //上述三个提示框内部调用的都是这个方法，配置丰富，具体看API文档
  Ext.MessageBox.show({
   title:'提示框名称',
   msg:'三个按钮，和一行文本输入域',
   width:600,
   height:500,
   modal:true,
   prompt:true,
   value:'请输入...',
   fn:callBack,
   buttons:Ext.Msg.YESNOCANCEL,
   icon:Ext.Msg.QUESTION
  });
  function callBack(id,msg){
   Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮' + '\n' + '输入内容是：'
     + 'msg');
  }
 }
 function extjsRefresh(btn){
  var msgBox=Ext.MessageBox.show({
   title:'提示',
   msg:'动态更新的信息文字',
   modal:true,
   buttons:Ext.Msg.OK,
   fn:function(){
    Ext.TaskManager.stop(task);
   }
  });
  var task={
   run:function(){
    msgBox.updateText('会动的时间：'+ Ext.util.Format.date(new Date(),'Y-m-d H:i:s'));
   },
   interval:1000
   };
  Ext.TaskManager.start(task);
 }
 
 function extjsRefreshProgerss(btn){
  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 H:i:s'));
     if(count > 10){
      Ext.TaskManager.stop(this);
      msgBox.hide();
     }
    },
    interval:300
  };
  Ext.TaskManager.start(task);
 }
});