Coolite官方例子学习笔记四：服务器端的弹出框、确认框、输入框
服务器端的弹出框、确认框、输入框
一、Alert
① 最简单的用法
protected void Button_Click(object sender, AjaxEventArgs e)
{
Ext.Msg.Alert("标题内容", "消息内容").Show();
}
② 点击“确定”后执行客户端JavaScript方法
后台：
protected void Button_Click(object sender, AjaxEventArgs e)
{
Ext.Msg.Alert("标题内容", "消息内容",
new Jfunction
{
Fn = ”JsMenthod”
}).Show();
}
前台：
<ext:Button ID ="Button1" runat ="server" Text ="确定后调用客户端Js">
<AjaxEvents>
<Click OnEvent ="Button_Click"></Click>
</AjaxEvents>
</ext: Button>
<script type="text/javascript">
function JsMethod() {
alert("执行了客户端的JavaScript方法");
}
</script>
③ Alert显示风格设置
前台：
<ext:Button ID ="Button1" runat ="server" Text ="服务器端Alert">
<AjaxEvents>
<Click OnEvent ="Button_Click"></Click>
</AjaxEvents>
</ext: Button>
后台：
protected void Button_Click(object sender, AjaxEventArgs e)
{
Ext.Msg.Show(new MessageBox.Config
{
Title = "图标提示框",
Message = "这个框带个图标",
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.INFO,
AnimEl = this.btnAlert.ClientID //动画效果
});
}
二、Confirm
① 最简单的
protected void Button_Confirm(object sender, AjaxEventArgs e)
{
Ext.Msg.Confirm("标题内容", "消息内容").Show();
}
② 通过JFunction指定一个客户端的JavaScript方法用来接收操作结果
后台：
protected void Button_Confirm(object sender, AjaxEventArgs e){
Ext.Msg.Alert("标题内容", "消息内容",
new Jfunction
{
Fn = ”ShowRsult”
}).Show();
}
前台：
<script type="text/javascript">
function ShowRsult(button) {
if(button == ”yes”){
Ext.Msg.alert("消息提示框",”你刚刚点击了删除”);
}
else{
Ext.Msg.alert(“消息提示框”,”你取消了”);
}
}
</script>
<ext:Button ID ="ButtonConfirm" runat ="server" Text ="点击确定后调用客户端Js的确认框">
<AjaxEvents>
<Click OnEvent ="Button_Confirm"></Click>
</AjaxEvents>
</ext: Button>
三、Prompt
Prompt可应用于简单的是数据录入，同上面Alert和Confirm一样通过JFunction指定客户端方法处理操作结果。
例子一：单行的输入框
protected void Button_Prompt(object sender, AjaxEventArgs e)
{
Ext.Msg.Prompt("数据录入", "请在下面录入数据",
new JFunction
{
Fn = "showResultText"
}).Show();
}
<ext:Button ID="btnPrompt" runat="server" Text="Prompt">
<AjaxEvents>
<Click OnEvent="Button_Prompt"></Click>
</AjaxEvents>
</ext:Button>
<script type="text/javascript">
function showResultText(button,text) {
alert("你录入的数据为：" + text);
}
</script>
例子二：多行输入框通过Ext.Msg.Show()方法
后台：
protected void Button_Prompt(object sender, AjaxEventArgs e)
{
Ext.Msg.Show(new MessageBox.Config
{
Title = "数据录入",
Message = "请在下面输入数据",
Width = 300,
Buttons = MessageBox.Button.OKCANCEL,
Multiline = true,
AnimEl = this.ButtonPrompt.ClientID,
Fn = new JFunction { Fn = "ShowPrompt" }
});
}
前台：
//输入框显示输入结果方法
function ShowPrompt(button, text) {
if (button == "ok" && text != "") {
Ext.Msg.alert("提示框", "你录入的数据为：" + text);
}
}
总结
第一点：Ext.Msg.Alert(。。。).Show();Ext.Msg.Confirm(。。。).Show();Ext.Msg.Prompt(。。。).Show();这三个中的.Show()不要忘记！
第二点：
① 确认框（Confirm）：在前端的JavaScript方法中的参数是点击的按钮属性（”yes”，”no”，”ok”，”cancel”等）。
② 输入框（Prompt）：在前端的JavaScript方法中的参数是点击的按钮属性和输入的文本值。
疑问
想设置这些框的高度，在后台Ext.Msg.Show（）中，想通过属性DefaultTextHeight设置这些框的高度，DefaultTextHeight = Unit.Pixel(300),或者 Unit.Parse("300px")这样设置后都无效果。
2009-11-21
学习参考内容出自：http://www.cnblogs.com/beniao/archive/2009/09/09/1562871.html
