一:Alert
Alert元件最簡單的用法就是直接彈出一個消息提示框:
protected void Button_Click(object sender, AjaxEventArgs e)
{
Ext.Msg.Alert("标題内容", "消息内容").Show();
}
如果我們需要在彈出的提示框點了“确定”以後要執行其他操作怎麼辦呢?這時候可以使用Alert方法的重載方法,通過JFunction指定一個用戶端方法,點了“确定”後就指定相應的用戶端JavaScript方法,使用如下:
Ext.Msg.Alert("标題内容", "消息内容", new JFunction { Fn = "JsMethod" }).Show();
<ext:Button ID="Button1" runat="server" Text="Submit">
<AjaxEvents>
<Click OnEvent="Button_Click"></Click>
</AjaxEvents>
</ext:Button>
<script type="text/javascript">
function JsMethod() {
alert("Client JsMethod");
}
</script>
Coolite Toolkit還為Alert提供了四中圖示UI效果,他們分别是問題(Question)、警告(Warning)、錯誤(Error)和資訊(Informational),使用不同的參數将建構出不同的Alert顯示風格。使用方法如下:
protected void Button_Alert(object sender, AjaxEventArgs e)
Ext.Msg.Show(new MessageBox.Config
{
Title = "圖示提示框",
Message = "這個框帶個圖示",
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.INFO,
AnimEl = this.btnAlert.ClientID
});
圖示的取值可以直接通過MessageBox.Icon枚舉設定,分别定義有:NONE、ERROR、INFO、QUESTION和WARNING。
除了上面的應用外,還可以通過Message.ButtonConfigs來配置Alert的進階應用,比如配置确認對話框,根據不同選擇執行不同的AjaxMethod方法(下面代碼裡的NS為通過ScriptManager指定的用戶端名稱空間,其功能等同于Coolite.AjaxMethods)。
Ext.Msg.Alert("标題内容", "消息内容", new MessageBox.ButtonsConfig
Yes = new MessageBox.ButtonConfig
{
Handler = "NS.DoYes()",
Text = "确定"
},
No = new MessageBox.ButtonConfig
Handler = "NS.DoNo()",
Text = "取消"
}
}).Show();
[AjaxMethod]
public void DoYes()
Ext.Msg.Alert("操作提示", "你剛剛點了-确定").Show();
public void DoNo()
Ext.Msg.Alert("操作提示", "你剛剛點了-取消").Show();
注:點了“确定”後直接執行服務端的另一方法沒有實作出來,還望實作過的朋友指點,謝謝。
二:Confirm
上面通過Coolite Toolkit的擴充功能将Alert元件實作了Confirm的效果,其實Confirm自身的功能也是非常強大的,同Alert一樣,最簡單的使用則是直接彈出确認對話框。
protected void Button_Confirm(object sender, AjaxEventArgs e)
Ext.Msg.Confirm("操作提示", "消息内容").Show();
如果要知道是點選了那一個操作按扭,則同樣可以通過JFunction指定一個用戶端的JavaScript方法用來接收操作結果。
Ext.Msg.Confirm("操作提示", "消息内容",
new JFunction
Fn = "ShowResult"
}).Show();
<ext:Button ID="btnConfirm" runat="server" Text="Confirm">
<Click OnEvent="Button_Confirm"></Click>
function ShowResult(btn) {
Ext.Msg.alert("你剛剛點了按扭:" + btn);
Confirm同樣也可以定制根據操作調用AjaxMethod,實作方式和本文前面的Alert實作方式一樣。
三:Prompt
Prompt可應用于簡單的是資料錄入,Coolite Toolkit裡的服務端Prompt使用非常簡單,同上面Alert和Confirm一樣通過JFunction指定用戶端方法處理操作結果。
protected void Button_Prompt(object sender, AjaxEventArgs e)
Ext.Msg.Prompt("資料錄入", "請在下面錄入資料",
new JFunction
{
Fn = "showResultText"
<ext:Button ID="btnPrompt" runat="server" Text="Prompt">
<Click OnEvent="Button_Prompt"></Click>
function showResultText(button,text) {
alert("你錄入的資料為:" + text);
以上實作的是單行的Prompt,Coolite Toolkit也提供了多行支援,使用如下:
Title = "資料錄入",
Message = "請在下面錄入資料:",
Width = 300,
Buttons = MessageBox.Button.OKCANCEL,
Multiline = true,
AnimEl = this.btnPrompt.ClientID,
Fn = new JFunction { Fn = "showResultText" }
上圖效果主要是通過Ext.Msg.Show()方法,通過該方法還可以定制許多我們需要的UI效果,比如說定制一個進度條效果,其實作為如下代碼片段:
protected void Button_Wait(object sender, AjaxEventArgs e)
Title = "請等待",
Message = "系統正在加載,請等待


",
ProgressText = "系統加載中",
Progress = true,
Closable = false,
AnimEl = this.btnWait.ClientID
this.StartLongAction();
private void StartLongAction()
this.Session["Task1"] = 0;
ThreadPool.QueueUserWorkItem(LongAction);
this.TaskManager1.StartTask("Task1");
private void LongAction(object state)
for (int i = 0; i < 10; i++)
Thread.Sleep(1000);
this.Session["Task1"] = i + 1;
this.Session.Remove("Task1");
protected void RefreshProgress(object sender, AjaxEventArgs e)
object progress = this.Session["Task1"];
if (progress != null)
Ext.MessageBox.UpdateProgress(((int)progress) / 10f, "");
else
this.TaskManager1.StopTask("Task1");
Ext.MessageBox.Hide();
this.ScriptManager1.AddScript("ProgressResult();");
Code
本文轉自 beniao 51CTO部落格,原文連結:http://blog.51cto.com/beniao/202652,如需轉載請自行聯系原作者