04第四講信息提示框組件.doc

第四講 EXT的信息提示框組件1. Ext.MessageBox.alert()方法標(biāo)準(zhǔn)提示框APIalert ( String title, String msg, Function fn, Object scope ) : Ext.MessageBox參數(shù)項(xiàng)：title : StringThe title bar textmsg : StringThe message box body textfn : Function(optional) The callback function invoked after the message box is closedscope : Object(optional) The scope of the callback function有四個參數(shù)，我們這里主要介紹前面三個。title，標(biāo)題，必選msg，本體文本，必選fn，在關(guān)閉彈出窗口后觸發(fā)該函數(shù)，可選。示例一：Ext.onReady(function TestMessageBox() /聲明函數(shù)的方式Ext.MessageBox.alert(測試,彈出提示框););添加事件處理Ext.onReady(function TestMessageBox() Ext.MessageBox.alert(測試,彈出對話框,function() document.write(關(guān)閉對話框); /在頁面上直接的書寫););對按鈕之進(jìn)行判斷Ext.onReady(function TestMessageBox() Ext.MessageBox.alert(測試,彈出對話框,function(e) if(e = ok) /此種判斷價(jià)值不高document.write(單擊了確定按鈕); else if(e = cancel) document.write(單擊了關(guān)閉按鈕);););與頁面的組件綁定使用 頁面上創(chuàng)建按鈕組件 Ext.onReady(function() Ext.get(btn).on(click ,function()Ext.MessageBox.alert(提示,這是標(biāo)準(zhǔn)的信息的彈出);/Message的彈出包含兩個message ,第一是title 第二是內(nèi)容/Ext.Msg.alert(另外方式的彈出););2. Ext.MessageBox.confirm()方法確認(rèn)對話框APIconfirm ( String title, String msg, Function fn, Object scope ) : Ext.MessageBox參數(shù)項(xiàng)：title : StringThe title bar textmsg : StringThe message box body textfn : Function(optional) The callback function invoked after the message box is closedscope : Object(optional) The scope of the callback function參數(shù)和alert方法一樣。示例二：Ext.onReady(function TestMessageBox() Ext.MessageBox.confirm(保存,是否保存文件););添加事件處理。Ext.onReady(function TestMessageBox() Ext.MessageBox.confirm(保存,是否保存文件,function(e)document.write(e);););對按鈕值進(jìn)行判斷。Ext.onReady(function TestMessageBox() Ext.MessageBox.confirm(保存,是否保存文件,function(e)if(e = yes) document.write(保存文件); else if(e = no) document.write(不保存文件);););與頁面的元素綁定 Ext.get(btnConfirm).on(click,function()Ext.Msg.confirm(請確認(rèn),是否要刪除該記錄 , function(button,text) /該函數(shù)為回調(diào)函數(shù),可以包含兩個參數(shù)/* * button:點(diǎn)擊的按鈕 * text:有活動時(shí) 輸入選項(xiàng)時(shí)輸入的內(nèi)容*/if (button=yes) /注意比較的字符串的書寫Ext.MessageBox.alert(提示,操作已經(jīng)執(zhí)行!); else /dosomthing);3.Ext.MessageBmpt()方法輸入對話框APIprompt ( String title, String msg, Function fn, Object scope, Boolean/Number multiline ) : Ext.MessageBoxtitle : StringThe title bar textmsg : StringThe message box body textfn : Function(optional) The callback function invoked after the message box is closedscope : Object(optional) The scope of the callback functionmultiline : Boolean/Number(optional) True to create a multiline textbox using the defaultTextHeight property, or the height in pixels to create the textbox (defaults to false / single-line)multiline參數(shù)用來設(shè)置是否為多行。示例三：Ext.onReady(function TestMessageBox() Ext.MessageBmpt(測試,請輸入你的姓名););多行文本Ext.onReady(function TestMessageBox() Ext.MessageBmpt(測試,請輸入你的留言,null,null,true););事件處理Ext.onReady(function TestMessageBox() Ext.MessageBmpt(測試,請輸入你的留言,function(e,text) if(e = ok) document.write(text);,null,true););與頁面的元素綁定 /輸入對話框Ext.get(btnPrompt).on(click,function()Ext.Mmpt(請輸入.,姓名: ,function(button,text) /該函數(shù)為回調(diào)函數(shù),可以包含兩個參數(shù)if (button=ok) /注意此時(shí)是okExt.MessageBox.alert(您輸入的姓名,text); else /dosomthing);4. Ext.MessageBox.show()方法自定義對話框APIshow ( Object config ) : Ext.MessageBoxanimEl String/Element 對話框彈出和關(guān)閉時(shí)的動畫效果buttons Object/Boolean 彈出框按鈕的設(shè)置closable Boolean 如果為false，則不顯示右上角的小叉叉，默認(rèn)為true。cls String 將客戶自定的CSS應(yīng)用到該對話框中defaultTextHeight Number 多行文本框中文本高度fn Function 關(guān)閉彈出框后執(zhí)行的函數(shù)icon String 彈出框內(nèi)容前面的圖標(biāo)maxWidth Number 最大大小(默認(rèn)600)minWidth Number 最小大小(默認(rèn)100)modal Boolean 是否為模式msg String 消息的內(nèi)容multiline Boolean 設(shè)為true，則彈出框帶有多行輸入框progress Boolean 設(shè)為true，顯示進(jìn)度條progressText String 顯示在進(jìn)度條上的文本prompt Boolean 設(shè)為true，則彈出框帶有輸入框proxyDrag Boolean 設(shè)置為true，則為拖拽的時(shí)候顯示一個輕量級別代理title String 標(biāo)題value String 文本框中的值wait Boolean 設(shè)為true，動態(tài)顯示progresswaitConfig Object 配置參數(shù)，以控制顯示progresswidth Number 彈出框的寬度示例四：Ext.onReady(function TestMessageBox() Ext.MessageBox.show(title:測試標(biāo)題,msg:測試內(nèi)容,buttons:Ext.MessageBox.OKCANCEL,icon:Ext.MessageBox.INFO,prompt:true,multiline:true,width:400,defaultTextHeight :150););進(jìn)度條Ext.onReady(function TestMessageBox() Ext.MessageBox.show(title:進(jìn)度條,msg:5秒后自動進(jìn)入系統(tǒng),progress:true,width:500,wait:true,waitConfig:interval:500,duration:5000,fn:function() Ext.MessageBox.hide();););與頁面的元素綁定 /自定義的對話框Ext.get(btnCustomer).on(click,function()Ext.Msg.show(/使用Msg對話框的構(gòu)造方法title:自定義的對話框,msg:提示信息,buttons:Ext.Msg.YESNOCANCEL,/按鈕的組成icon:Ext.Msg.QUESTION,fn:save /指明回調(diào)函數(shù),表示點(diǎn)擊完成的事件的操作););_/定義自定義對話框的回調(diào)函數(shù)function save(button)if(button=yes)alert(操作成功.);練習(xí)題目: