Coolite官方例子学习笔记五:前四篇的总结心得

 

前四篇的总结心得

前面四篇主要讲了下Coolite中按钮相关的一些点击监听事件的调用,客户端和服务器端。感觉官方的例子弹出的框都是在后台写的,一般通过

Ext.Msg.Show(new MessageBox.Config

{

    Title=”XXX”,

     。。。等其他需要的属性

}

 

但是其中一些属性比如DefaultTextHeight的设置后都无效。

然后前台的对话框的操作的话,更多的是ExjJS的内容。

下面就分操作成功后弹出的对话框写在后台还是前台分别做删除的例子。

① 提示框在后台写:(主要是Coolite的,学习笔记四的内容)

前台代码:

<script type="text/javascript">

function DelSelectedRowFn() {

         Ext.MessageBox.confirm('提示', '是否要删除这些记录', function(btn) {

            if (btn == "yes") {

                Coolite.AjaxMethods.DeleteSelectedRow(); //执行后台方法

                }

            });

        }

</script>

 

<ext:Button ID="ButtonDel" runat="server" Text="删除测试">

      <Listeners>

          <Click Fn="DelSelectedRowFn" />

      </Listeners>

</ext:Button>

 

后台代码:

[AjaxMethod]

public void DeleteSelectedWorkFlow()

{

//这里先写删除的逻辑代码。。。

 

//删除成功就弹出下面这个提示

    Ext.Msg.Show(new MessageBox.Config

    {

        Title = "提示",

        Message = "你已经成功删除该记录!",

        Buttons = MessageBox.Button.OK,

        AnimEl = this.ButtonDel.ClientID,

    });

}

 

② 提示框在前台写:(主要的ExtJS的用法,学习笔记一的内容)

前台代码:

<script type="text/javascript">

    //删除示例成功后弹出提示框写在前台

    function DelSelectedRowFn2() {

        Ext.MessageBox.confirm('提示', '是否真的要删除该记录', function(btn) {

           if (btn == "yes") {

              Coolite.AjaxMethod.request("DeleteSelectedRow2", {

                        success: function(result) {

                            Ext.Msg.alert("提示", result);

                        },

                        eventMask: {

                            showMask: true,

                            msg: '正在删除,请稍后...',

                            minDelay: 500

                        }

                    });

                }

            });

        }

</script>

<ext:Button ID="Button3" runat="server" Text="删除成功后弹出对话框在前台写(ExtJS">

      <Listeners>

          <Click Fn="DelSelectedRowFn2" />

      </Listeners>

</ext:Button>

 

后台代码

[AjaxMethod]

public string DeleteSelectedRow2()

{

//这里先写删除的逻辑代码

   

//删除成功后返回的是一串字符串

    return "你已经成功删除!";

}

 

 用方法②在前台写弹出框用ExtJS的东西,效果可能会比较花哨绚丽,而且有ExtJS帮助文档,可以进一步了解ExtJS,但是前台的东西出错找原因比较麻烦,方法①中后台Coolite自带的弹出框的属性比较少。

 

2009-11-21

 

 

补:今天看完Mr.King的文章发现原来还可以全部在后台写:

页面test.aspx 项目名称MyCooliteTest。

前台:在ScriptManager中加上AjaxMethodNamespace指定一个命名空间

<ext:ScriptManager ID="ScriptManager1" runat="server" AjaxMethodNamespace="MyCooliteTest">

        </ext:ScriptManager>

        <ext:Button ID="Button1" runat="server" Text="删除按钮">

            <AjaxEvents>

                <Click OnEvent="Button1_Click">

                </Click>

            </AjaxEvents>

        </ext:Button>

后台:

using Coolite;

using Coolite.Ext;

using Coolite.Ext.Web;

 

namespace MyCooliteTest

{

    public partial class test : System.Web.UI.Page

    {

       protected void Page_Load(object sender, EventArgs e)

       {

       }

 

       protected void Button1_Click(object sender, AjaxEventArgs e)

        {

                Ext.Msg.Alert("提示", "消息内容", new MessageBox.ButtonsConfig

                {

                    Yes = new MessageBox.ButtonConfig

                    {

                        Handler = "MyCooliteTest.DoYes()",

                        Text = "确定"

                    },

                    No = new MessageBox.ButtonConfig

                    {

                        Handler = "MyCooliteTest.DoNo()",

                        Text = "取消"

                    }

                }).Show();

        }

 

        //服务端方法:

        [Coolite.Ext.Web.AjaxMethod]

       public void DoYes()

        {

            Ext.Msg.Alert("操作提示", "删除成功!").Show();

        }

 

        [Coolite.Ext.Web.AjaxMethod]

        public void DoNo()

        {

            Ext.Msg.Alert("操作提示", "你刚点了取消").Show();

        }

    }

}

 

2009-11-23

 

posted @ 2009-11-21 14:27  梅子  阅读(997)  评论(0编辑  收藏  举报