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有四個(gè)參數(shù)，我們這里主要介紹前面三個(gè)。title，標(biāo)題，必選msg，本體文本，必選fn，在關(guān)閉彈出窗口后觸發(fā)該函數(shù)，可選。示例一：Ext.onReady(function TestMessageBox() /聲明函數(shù)的方式Ext.MessageBox.alert(測(cè)試,彈出提示框););添加事件處理Ext.onReady(function TestMessageBox() Ext.MessageBox.alert(測(cè)試,彈出對(duì)話框,function() document.write(關(guān)閉對(duì)話框); /在頁(yè)面上直接的書寫););對(duì)按鈕之進(jìn)行判斷Ext.onReady(function TestMessageBox() Ext.MessageBox.alert(測(cè)試,彈出對(duì)話框,function(e) if(e = ok) /此種判斷價(jià)值不高document.write(單擊了確定按鈕); else if(e = cancel) document.write(單擊了關(guān)閉按鈕);););與頁(yè)面的組件綁定使用 頁(yè)面上創(chuàng)建按鈕組件 Ext.onReady(function() Ext.get(btn).on(click ,function()Ext.MessageBox.alert(提示,這是標(biāo)準(zhǔn)的信息的彈出);/Message的彈出包含兩個(gè)message ,第一是title 第二是內(nèi)容/Ext.Msg.alert(另外方式的彈出););2. Ext.MessageBox.confirm()方法確認(rèn)對(duì)話框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);););對(duì)按鈕值進(jìn)行判斷。Ext.onReady(function TestMessageBox() Ext.MessageBox.confirm(保存,是否保存文件,function(e)if(e = yes) document.write(保存文件); else if(e = no) document.write(不保存文件);););與頁(yè)面的元素綁定 Ext.get(btnConfirm).on(click,function()Ext.Msg.confirm(請(qǐng)確認(rèn),是否要?jiǎng)h除該記錄 , function(button,text) /該函數(shù)為回調(diào)函數(shù),可以包含兩個(gè)參數(shù)/* * button:點(diǎn)擊的按鈕 * text:有活動(dòng)時(shí) 輸入選項(xiàng)時(shí)輸入的內(nèi)容*/if (button=yes) /注意比較的字符串的書寫Ext.MessageBox.alert(提示,操作已經(jīng)執(zhí)行!); else /dosomthing);3.Ext.MessageBmpt()方法輸入對(duì)話框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ù)用來(lái)設(shè)置是否為多行。示例三：Ext.onReady(function TestMessageBox() Ext.MessageBmpt(測(cè)試,請(qǐng)輸入你的姓名););多行文本Ext.onReady(function TestMessageBox() Ext.MessageBmpt(測(cè)試,請(qǐng)輸入你的留言,null,null,true););事件處理Ext.onReady(function TestMessageBox() Ext.MessageBmpt(測(cè)試,請(qǐng)輸入你的留言,function(e,text) if(e = ok) document.write(text);,null,true););與頁(yè)面的元素綁定 /輸入對(duì)話框Ext.get(btnPrompt).on(click,function()Ext.Mmpt(請(qǐng)輸入.,姓名: ,function(button,text) /該函數(shù)為回調(diào)函數(shù),可以包含兩個(gè)參數(shù)if (button=ok) /注意此時(shí)是okExt.MessageBox.alert(您輸入的姓名,text); else /dosomthing);4. Ext.MessageBox.show()方法自定義對(duì)話框APIshow ( Object config ) : Ext.MessageBoxanimEl String/Element 對(duì)話框彈出和關(guān)閉時(shí)的動(dòng)畫效果buttons Object/Boolean 彈出框按鈕的設(shè)置closable Boolean 如果為false，則不顯示右上角的小叉叉，默認(rèn)為true。cls String 將客戶自定的CSS應(yīng)用到該對(duì)話框中defaultTextHeight Number 多行文本框中文本高度f(wàn)n 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í)候顯示一個(gè)輕量級(jí)別代理title String 標(biāo)題value String 文本框中的值wait Boolean 設(shè)為true，動(dòng)態(tài)顯示progresswaitConfig Object 配置參數(shù)，以控制顯示progresswidth Number 彈出框的寬度示例四：Ext.onReady(function TestMessageBox() Ext.MessageBox.show(title:測(cè)試標(biāo)題,msg:測(cè)試內(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秒后自動(dòng)進(jìn)入系統(tǒng),progress:true,width:500,wait:true,waitConfig:interval:500,duration:5000,fn:function() Ext.MessageBox.hide();););與頁(yè)面的元素綁定 /自定義的對(duì)話框Ext.get(btnCustomer).on(click,function()Ext.Msg.show(/使用Msg對(duì)話框的構(gòu)造方法title:自定義的對(duì)話框,msg:提示信息,buttons:Ext.Msg.YESNOCANCEL,/按鈕的組成icon:Ext.Msg.QUESTION,fn:save /指明回調(diào)函數(shù),表示點(diǎn)擊完成的事件的操作););_/定義自定義對(duì)話框的回調(diào)函數(shù)function save(button)if(button=yes)alert(操作成功.);練習(xí)題目: