这是一个小版本更新，主要修正IE7，IE8下得兼容性问题。欢迎大家将使用中发现的问题以文章评论的形式反馈给我，我会尽可能快地更新版本。
========================
ExtAspNet - 基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果
ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果。
ExtAspNet 是为了创建没有 JavaScript，没有 CSS，没有 UpdatePanel，没有 ViewState，没有 WebServices 的网站应用程序。
支持的浏览器: IE 7.0+, Firefox 3.6+, Chrome 3.0+, Opera 10.5+, Safari 3.0+
开源：http://extaspnet.codeplex.com/
博客：http://sanshi.cnblogs.com/
邮箱: sanshi.ustc@gmail.com
发布历史：
+2012-02-05 v3.0.1
-修正IE7、IE8的兼容性问题（dotnet试验田）。
-修正BUG - 弹出层如果我点击右上角的关闭按钮，再打开就不能打开（用情）。
-修正上传控件在IE7下的问题（yfen）。
posted @ 2012-02-05 20:08 三生石上 阅读(317) 评论(5)
编辑曾经最普普通通的按钮，在ExtAspNet中摇身一变，法力无边，下面就来看看你曾经最熟悉的按钮？
按钮的状态与大小
按钮有启用/禁用，按下/正常几种状态，对应的属性分别为Enabled、EnablePress、Pressed三个属性。显示效果如图所示：
按钮有大中小三个尺寸，对应的属性为Size，显示效果如下所示：
按钮上的图标
按钮上的图标可以通过Icon（枚举类型，ExtAspNet内置了很多图标）或者IconUrl两个属性来指定，图标的位置可以位于文本的上下左右四个位置，通过IconAlign属性来指定。
对于不显示文字的按钮，只需要指定Icon或者IconUrl属性，而不用指定Text属性即可。
按钮的点击事件
默认按钮的点击会触发一次AJAX的回发，典型的代码示例如下：
<ext:Button ID="btnServerClick" Text="服务器端事件" OnClick="btnServerClick_Click" runat="server">
</ext:Button>
protected void btnServerClick_Click(object sender, EventArgs e)
{
// 事件处理
}
如果希望在客户端通过JavaScript代码来处理按钮的点击事件，需要设置EnablePostBack和OnClientClick两个属性，典型的代码如下所示：
<ext:Button ID="btnClientClick" Text="客户端事件" OnClientClick="alert('这是客户端事件');" EnablePostBack="false" runat="server">
</ext:Button>
有时，我们希望在服务器端通过C#代码注册客户端的事件脚本，典型代码如下所示：
<ext:Button ID="btnClientClick2" Text="服务器端生成的客户端事件" EnablePostBack="false" runat="server">
</ext:Button>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
btnClientClick2.OnClientClick = Alert.GetShowInTopReference("这是在服务器端生成的客户端事件");
}
}
按钮点击事件的一个隐藏特性
在使用ASP.NET的按钮编程时，我们经常需要额外处理一个情况：防止按钮的重复提交！
而这个特性已经内置在ExtAspNet的按钮中，并且公开了一个属性DisableControlBeforePostBack（默认已经启用这个功能），是不是很方便，ExtAspNet的细腻之处很多都体现在这些非常实用的功能上，后面你会在Grid、DropDownList、Window等很多控件上看到类似的手笔。
ExtAspNet是怎么做到这一点的呢？
道理也非常简单，在Web.config中打开DebugMode参数，然后查看页面的HTML源代码，你会发现如下的脚本：
在AJAX的响应正文，会再次启用这个按钮：
客户端验证表单
按钮的一个主要用途是提交表单，以前我们或许要写一堆JavaScript代码了验证每个表单控件，然后在点击按钮回发之前弹出错误提示框。在ExtAspNet的应用场景中，我们只需要为每个控件设置验证规则，然后设置按钮需要验证哪个表单或者哪些表单，这是通过ValidateForms属性来实现的。
如果需要验证多个表单，只需要将这些表单的ID以逗号分隔的形式设置到ValidateForms属性即可。可以查看这个示例页面。
<ext:Button ID="btnSubmitAll" Text="验证两个表单并提交" runat="server" OnClick="btnSubmitAll_Click" ValidateForms="extForm1,extForm2" />
在客户端验证失败时，会显示如下的提示框，并阻止本次表单提交：
如果你采用类似示例站点的IFrame框架结构，一定不要错过另一个属性ValidateTarget，它指定了错误提示框显示的位置，可以是本页面也可以是父页面。
带有菜单的按钮
按钮也可以拥有自己的菜单，这个示例的效果图如下所示：
ASPX页面的标签也非常干净利落:
1: <ext:Button ID="btnMenu" Text="中国科学技术大学" EnablePostBack="false" runat="server">
2: <Menu>
3: <ext:MenuHyperLink runat="server" Icon="TagGreen" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/"
4: Text="化学与材料科学学院">
5: </ext:MenuHyperLink>
6: <ext:MenuHyperLink runat="server" Icon="TagBlue" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/"
7: Text="管理学院">
8: <Menu>
9: <ext:MenuHyperLink runat="server" Icon="TagPink" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/"
10: Text="工商管理系">
11: </ext:MenuHyperLink>
12: <ext:MenuHyperLink runat="server" Icon="TagPurple" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/"
13: Text="统计与金融系">
14: </ext:MenuHyperLink>
15: </Menu>
16: </ext:MenuHyperLink>
17: </Menu>
18: </ext:Button>
工具栏中的按钮
按钮不仅可以单独使用，在表单中作为提交按钮，当放在工具栏中时，它摇身一变成了一个工具栏项。这样我们不仅可以设置按钮工具栏项的状态、添加点击事件、验证表单，而且还可以添加菜单，如下所示：
ASPX页面标签如下：
1: <ext:Panel ShowBorder="true" BodyPadding="5px" Height="300px" Width="450px" ShowHeader="false"
2: runat="server">
3: <Toolbars>
4: <ext:Toolbar runat="server">
5: <Items>
6: <ext:ToolbarText runat="server" Text="内联项：">
7: </ext:ToolbarText>
8: <ext:ToolbarSeparator runat="server">
9: </ext:ToolbarSeparator>
10: <ext:Button EnablePostBack="false" Text="中国科学技术大学" runat="server">
11: <Menu>
12: <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/"
13: Text="化学与材料科学学院">
14: </ext:MenuHyperLink>
15: <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/"
16: Text="管理学院">
17: <Menu>
18: <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/"
19: Text="工商管理系">
20: </ext:MenuHyperLink>
21: <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/"
22: Text="统计与金融系">
23: </ext:MenuHyperLink>
24: </Menu>
25: </ext:MenuHyperLink>
26: </Menu>
27: </ext:Button>
28: </Items>
29: </ext:Toolbar>
30: </Toolbars>
31: </ext:Panel>
点击按钮前的确认对话框
如果我们希望在点击按钮的时候首先弹出确认对话框（类似于JavaScript的window.confirm），在征得用户的同意后再触发按钮的默认行为，该怎么办？
ExtAspNet也考虑到了这种需求，特意提供了如下几个属性：ConfirmText/ConfirmTitle/ConfirmIcon/ConfirmTarget
一个典型的应用是在数据展示表格的工具栏中，放置一个写着“删除选中项”的按钮，用来删除表格中选中的项。为了防止用户误操作，我们一般需要首先提醒用户这个操作是不可恢复的操作，是否确认删除。此时按钮的这些属性就派上用场了，请看这个示例。
小结
这一篇文章没有涉及很多应用技巧，不过介绍的知识都很实用，如果你打算或者正在使用ExtAspNet，一定不要错过按钮的这些功能。
下一篇文章我们会对ExtAspNet中基本的表单控件进行简单的学习。
注：本系列文章由三生石上原创，博客园首发，转载请注明出处。如果你喜欢本系列文章，请一定不要忘记推荐本文或者关注博主。
《ExtAspNet秘密花园》系列文章目录
posted @ 2012-02-05 11:40 三生石上 阅读(1816) 评论(10)
编辑