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