Ext 学习(2)---ExtMessageBox

 

Ext 提示框

Ext.MessageBox经常用到的提示框有：alert confirm prompt progress，还有一个统一的处理方式 show

• show方法常用的配置属性如下：

• title:提示框的标题文字
• msg:提示框显示的文字
• animateTarget:动画的目标对象，从哪里出来，在哪里消失
• buttons:显示的按钮
• closable:是否显示关闭按钮
• icon:提示框中的显示的图标，有Question、info、error等
• prompt:是否为输入框 true|false
• multiline:是否显示为多行输入文本框
• progress:是否是进度条提示框progressText
• progressText:进度款显示的文本
• width:进度条宽度
• fn:事件处理函数

Ext.onReady(function(){//给Id是btn1的按钮绑定click事件Ext.get('btn1').on('click',function(e){Ext.MessageBox.confirm('Confirm','Are you sure to do that?',showResult);});Ext.get('btn2').on('click',function(e){Ext.MessageBox.prompt('prompt','Please enter you favorite food',showResultText,this,true);});//进度框Ext.get('btn4').on('click',function(e){Ext.MessageBox.show({   title: 'Please wait',   msg: 'Loading items...',   progressText: 'Initializing...',   width:300,   progress:true,   closable:false,   animateTarget: 'btn4'});var f = function(v){return function(){if(v == 12){Ext.MessageBox.hide();}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);   }});Ext.get('btn3').on('click',function(e){Ext.MessageBox.show({animateTarget:'btn3',title:'Icon Alert Box',msg:'Is that beautiful?',prompt:true,multiline:true,buttons:Ext.MessageBox.YES,fn:showResultText,icon:Ext.get("icons").dom.value  });});});function showResult(btn){        Ext.Msg.alert('Button Click', 'You clicked the '+btn+' button');}function showResultText(btn,text){        Ext.Msg.alert('Button Click', 'You clicked the '+btn+' button,And your enter is:' + text);}