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);
	}